Make overflowing items snap to the container using tow CSS properties scroll-snap-type on the container and scroll-snap-align each content item.

In the example the container has the following CSS

.container {
  width: 20rem;
  height: 20rem;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

There are five div elements, in the container, in the example each with the following CSS.

.container div{
  min-width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  scroll-snap-align: center;
}

The HTML looks like this.

<div class="container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
</div>