Encountering an issue with Edge/IE when using flexbox. To prevent content overflow, overflow-x: auto is used. With a column flex direction and flex-grow:1 on content items, overflow-y should not be necessary. However, the scrollbar appears above the content due to height computation issues - this problem only arises with flex-direction column, row works fine.
For different combinations of scroll/auto/hidden for overflow-x and y, check out this jsfiddle: https://jsfiddle.net/o1pv3b4o/5.
overflow-x:autowithoverflow-y:hidden: hides the horizontal scrollbar and content.overflow-x: scroll: solves the issue by accurately computing height with the scrollbar in mind, but may result in a disabled scrollbar if there's no overflow.overflow-x: auto: functions correctly withoverflow-y:scroll|auto, but will display a disabled vertical scrollbar in both cases.
Is there a solution to ensure accurate height calculation without displaying unnecessary scrollbars?
Sample HTML:
<div class='ctnr'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.ctnr {
display: flex;
flex-flow: column wrap;
background: orange;
width: 400px;
height: 225px;
margin: 1rem;
overflow-x: auto;
overflow-y: hidden;
}
.ctnr div {
min-height: 80px;
flex: 1 1 auto;
width: 45%;
margin: 0;
border: 1px solid blue;
background: lightblue;
}