<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;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.