Следующий код CSS Grid ведет себя по-разному в Chrome и IE, чем в FF.
https://codepen.io/inkOrange/pen/XGzeMo Макет предназначен для горизонтальной прокрутки, когда переполненное содержимое не подходит, как яВы были вынуждены в этой демонстрации.
Внешний контейнер установлен на 900px.При проверке контейнера сетки .TableRow в Chrome (72.0) ширина составляет: 1010 пикселей, что приводит к горизонтальной полосе прокрутки.
Но в FF (65.0) он выглядит как меньшая ширина, чем его ограничительная рамка: 885 пикселей,не вызывая переполнения / полосы прокрутки.
Содержимое .TableRow выходит за пределы ограничивающего контейнера в обоих браузерах, но FF, по-видимому, не определяет истинную ширину элементов на основе css-grid.
Как я могу это исправить для FF?Я ожидаю полосу прокрутки на .TableWrapper
HTML:
<div style="width: 900px; overflow: auto;">
<section class="TabularListing">
<section class="TableWrapper">
<div class="TableHeaderContainer">
<div></div>
<div><label style="cursor: pointer;">Dest</label></div>
<div><label style="cursor: pointer;">Opened</label></div>
<div><label style="cursor: pointer;">Cube</label></div>
<div><label style="cursor: pointer;">Y<em>(ft)</em></label></div>
<div><label style="cursor: pointer;">Z<em>(ft)</em></label></div>
<div><label style="cursor: pointer;">Z<em>(ft)</em></label></div>
<div><label style="cursor: pointer;">Weight</label></div>
</div>
<div class="TableBodyContainer">
<div class="TableRow">
<div></div>
<div><span data-filterable="true" data-value="BILL">BILL</span></div>
<div><span>1380233679000</span></div>
<div><span>72</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
</div>
<div class="TableRow">
<div></div>
<div><span data-filterable="true" data-value="BILL">BILL</span></div>
<div><span>1380233679000</span></div>
<div><span>72</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
</div>
<div class="TableRow">
<div></div>
<div><span data-filterable="true" data-value="BILL">BILL</span></div>
<div><span>1380233679000</span></div>
<div><span>72</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
</div>
<div class="TableRow">
<div></div>
<div><span data-filterable="true" data-value="BILL">BILL</span></div>
<div><span>1380233679000</span></div>
<div><span>72</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
</div>
<div class="TableRow">
<div></div>
<div><span data-filterable="true" data-value="BILL">BILL</span></div>
<div><span>1380233679000</span></div>
<div><span>72</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
<div><span>94</span></div>
</div>
</div>
</section>
</section>
</div>
CSS:
.TabularListing {
position: relative;
.TableWrapper {
display: grid;
grid-template-rows: 64px calc(136px);
overflow: auto hidden;
.TableHeaderContainer {
background-color: white;
min-height: 24px;
max-height: 64px;
overflow: hidden;
display: grid;
width: 100%;
grid-template-columns: 50px 250px 180px 130px minmax(100px, 12.5%) minmax(100px, 12.5%) minmax(100px, 12.5%) minmax(100px, 15%);
border-bottom: 1px solid rgb(224, 224, 224);
> div {
box-shadow: rgba(0, 0, 0, 0) 0px -1px 0px 0px inset, rgb(224, 224, 224) 0px -1px 0px inset; transition: all 0.5s ease 0s;
opacity: 0.75;
padding: 20px 38px 20px 60px;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.3rem;
font-weight: 400;
text-align: left;
line-height: 1.5rem;
color: rgb(33, 33, 33);
vertical-align: top;
background-color: white; position: relative;
}
}
.TableBodyContainer {
overflow: hidden auto; width: 100%;
.TableRow {
display: grid;
grid-template-columns: 50px 250px 180px 130px minmax(100px, 12.5%) minmax(100px, 12.5%) minmax(100px, 12.5%) minmax(100px, 15%); transition: box-shadow 0.25s ease 0s;
background-color: white;
border-bottom: 1px solid rgb(224, 224, 224);
cursor: pointer;
min-height: auto;
> div {
padding: 20px 40px 20px 60px;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.3rem;
text-align: right;
position: relative;
}
}
}
}
}