Encountering a problem with using overflow-x: scroll and justify-content: center on a flex parent container. Here is my code snippet:
The issue: the first flex child item is not visible as it is cropped on the left side. Please refer to the screenshot and code below.
Your assistance will be greatly appreciated. Thank you in advance.
.container {
width: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row;
overflow-x: scroll;
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>