<div class="scroll-box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="scroll-text">Scroll ></div>
body {font-family: 'Roboto', sans-serif;}
.scroll-box {
margin: auto;
scroll-snap-type: x mandatory;
scroll-padding: 8px;
scroll-padding-left: 4px;
display: flex;
overflow-x: scroll;
height: min-content;
width: 250px;
border: 4px solid royalblue;
}
.item {
scroll-snap-align: start;
flex: 0 0 calc(50px - 16px);
width: calc(50px - 16px);
border: 4px solid gold;
margin: 4px 4px 4px 4px;
text-align: center;
padding: 10px;
align-items: center;
justify-content: center;
font-size: 32px;
}
.scroll-text { text-align: center;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.