When using this CSS Grid code, there is a difference in behavior between Chrome and IE compared to Firefox.
https://codepen.io/inkOrange/pen/XGzeMo This layout is intended to scroll horizontally when the content overflows beyond the fixed container size of 900px. This discrepancy can be observed in the demo provided.
In Chrome (version 72.0), inspecting the .TableRow grid container shows a width of 1010px, resulting in a horizontal scrollbar due to the overflow.
However, in Firefox (version 65.0), the width appears less than the bounding box at 885px, which does not trigger an overflow/scroll bar.
Although the contents of .TableRow exceed the boundary in both browsers, Firefox seems unable to accurately determine the true width of the css-grid elements.
Any suggestions on how to resolve this issue for Firefox? The expectation is to have 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>
<!-- More rows -->
</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;
}
}
}
}
}