The following CSS Grid code behaves differently in Chrome and IE than it does in FF.
https://codepen.io/inkOrange/pen/XGzeMo The layout is designed to scroll horizontally when the overflowed contents don't fit, as I've forced in this demo.
The outside container is fixed at 900px. When inspecting the .TableRow grid container in Chrome (72.0), the width is: 1010px, forcing the horizontal scroll bar.
But in FF (65.0) it reads as a less width as its bounding box: 885px, causing no overflow/scroll bar.
The contents of .TableRow extend beyond the bounding container in both browsers, but FF appears to not resolve the true width of the css-grid based elements.
How can I fix this for FF? I expect a scroll bar on .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;
}
}
}
}
}
It seems to work across browsers when you remove overflow: hidden from .TableHeaderContainer.