Trying to create a scrollable-table using flexbox.
The challenge is to fit a table with fixed sizes into a viewport of specific dimensions.
Here's the basic structure I have in mind:
<div class="container" style="width: x; height: y; overflow: scroll">
<div data-row="1">
<div data-column="1"></div>
<div data-column="2"></div>
<div data-column="3"></div>
</div>
<div data-row="2">
<div data-column="1"></div>
<div data-column="2"></div>
<div data-column="3"></div>
</div>
<div data-row="3">
<div data-column="1"></div>
<div data-column="2"></div>
<div data-column="3"></div>
</div>
</div>
Current progress looks like this:
#viewport {
border: 1px solid black;
overflow: auto;
width: 350px;
}
#content {
#position: relative;
overflow: hidden;
}
.cell {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-wrap: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.column {
width: 200px;
height: 100px;
}
.row {
display: flex;
flex-direction: row;
overflow: hidden;
border: 1px solid black;
#overflow-x: scroll;
overflow: visible;
box-sizing: border-box;
}
.viewport {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
overflow: scroll;
flex-wrap: wrap;
#flex-wrap: nowrap;
box-sizing: border-box;
flex-basis: 0;
}<div class="viewport"><<!--
--><div class="row"><<!--
--><div class="cell column" style="background-color: red;"></div><<!--
--><div class="cell column" style="background-color: green;"></div><<!--
--><div class="cell column" style="background-color: blue;"></div><<!--
--><div class="cell column" style="background-color: hotpink;"></div><<!--
--></div><<!--
--><div class="row"><<!--
--><div class="cell column" style="background-color: red;"></div><<!--
--><div class="cell column" style="background-color: green;"></div><<!--
--><div class="cell column" style="background-color: blue;"></div><<!--
--><div class="cell column" style="background-color: hotpink;"></div><<!--
--></div><<!--
--></div> Encountering white space issues, particularly on Chrome and IE11 - whereas Firefox and Edge are working correctly.
Removing flex-wrap property from .viewport causes similar problems on Edge and Firefox.
Ideally, I'd prefer not having the flex-wrap on .viewport altogether.
The root cause of this discrepancy eludes me thus far.
Frustrating situation indeed. Any insights or suggestions would be greatly appreciated.