CSS тип отображения таблицы элементов строк высота в Firefox

Question

Я использую несколько содержимого блоков на моем одном приложении страницы http://geolytix.com

Вот пример блок:

<div class="section" id="section_geodata"> 
    <p class="title">Geodata</p> 
    <div class="table-row__spacer"></div> 
    <p class="intro">Where people live...</p> 
    <div class="table-row__spacer"></div> 
    <div class="container"> 

    <div class="select"> 
     <div class="select__inner"> 
     <div class="cursor retail_points selected">Retail Points</div> 
     <div class="cursor retail_places">Retail Places</div> 
     <div class="cursor seamless_locales">Seamless Locales</div> 
     <div class="cursor town_suburbs">Town and Suburb</div> 
     <div class="cursor postal_geom">Postal Geometries</div> 
     <div class="cursor public_transport">Public Transport</div> 
     <div class="cursor road_network">Road Network</div> 
     <div class="cursor uk_admin">UK Admin</div> 
     <div class="cursor education">Education</div> 
     <div class="cursor poi">Points of Interest</div> 
     <div class="cursor pricing">Pricing</div> 
     <div class="cursor faq">FAQ</div> 
     </div> 
    </div> 

    <div class="content map"> 
     <div id="map_geodata"></div> 
    </div> 

    </div> 

</div> 

Эти блоки не должны быть не выше, чем в браузере высота окна. Например, я задал высоту section_geodata.

#section_geodata { 
    display: table; 
    height: calc(100% - 95px); 
} 

отобразить блок в виде таблицы, так как я хочу, чтобы отобразить внутренние элементы в виде строки таблицы для того, чтобы использовать авто высоты для этих элементов.

устанавливаемыми сотовыми других элементов выглядит следующим образом:

#section_geodata { 
    display: table; 
    height: calc(100% - 95px); 
} 
#section_geodata > .title { 
    display: table-row; 
    height: 0; 
} 
#section_geodata > .table-row__spacer:nth-of-type(1) { 
    display: table-row; 
    height: 30px; 
} 
#section_geodata > .intro { 
    display: table-row; 
    height: 0; 
} 
#section_geodata > .table-row__spacer:nth-of-type(2) { 
    display: table-row; 
    height: 40px; 
} 
#section_geodata > .container { 
    width: 100%; 
    display: table-row; 
    height: auto; 
} 
#section_geodata > .container > .select { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#section_geodata > .container > .select > .select__inner { 
    position: absolute; 
    width: 300px; 
    top: 0; 
} 
#section_geodata > .container > .content { 
    position: relative; 
    float: right; 
    width: calc(100% - 300px); 
    height: 100%; 
    display: none; 
} 
#section_geodata > .container > .map { 
    width: calc(100% - 300px); 
} 
#section_geodata > .container > .map > #map_geodata { 
    width: 100%; 
    height: 100%; 
} 

Это прекрасно работает с Chrome, IE & Edge, но не работает с Firefox. Элементы таблицы-строки не изменяются как ожидалось.

Было бы здорово, если бы у кого-то была идея достичь того же макета, который работает с другим браузером.

Answer 1

Я только что нашел решение после предложения не использовать высоту: auto для контейнера .select или height: 0 для элементов таблицы.

Я изменил высоту: авто для высоты: 100% для контейнера .select и высоты: 1px вместо высоты: 0 для строк таблицы. Макет и размер теперь одинаковы для разных браузеров.