Struggling to create a horizontal scrolling component similar to Instagram stories? Here's what I've attempted so far:
.scroller{
height: 125px;
width: 300px;
background-color: blue;
overflow-x: scroll;
overflow-y: hidden;
}
.itemContainer{
display: flex;
}
.item{
display: inline-block;
width: 100px;
height: 100px;
background-color: lime;
margin: 5px;
}<div class="scroller">
<div class="itemContainer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>Experimented with flexbox properties and block elements but haven't found a solution yet for the item overflow issue.