I recently embarked on converting one of my websites to flexbox and encountered an issue with vertical scrolling within a flex container. It appears that Firefox displays it correctly, while Chrome and Safari do not. You can check out the code here.
.container {
height: 200px;
border: solid 1px #000;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.item {
border: solid 1px red;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item div {
border: solid 1px green;
}<div class="container">
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
<div class="item">
<div>box 1</div>
<div>box 2</div>
</div>
</div>It's tricky because the box 1 & 2 text is not properly rendered inside the flex item. Can someone shed some light on what might be going wrong here and how I can resolve it?
Thank you!