Overflow-x scroll doesn’t work properly on mobile

https://codesandbox.io/s/frosty-water-fintki

As you can see in attached sandbox I have a scrollable div with 6 items aligned in 2 rows.

But when you switch to mobile view (toggle responsive view button near sandbox url input) it starts scrolling vertically.

I’ve noticed, that if you remove flex-wrap it works correctly, but I need this to make 2 rows.

How can I get same behaviour for mobile and desktop?

Answer

CSS grid will give you easier (IMHO) control over the layout when you have to consider 2 dimensions.

Here’s a simple example using your sizing of the elements.

.wrapper {
  display: grid;
  width: 100vw;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.button-item {
  background-color: red;
  width: 170px;
  height: 146px;
  border-radius: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="button-item">1</div>
  <div class="button-item">2</div>
  <div class="button-item">3</div>
  <div class="button-item">4</div>
  <div class="button-item">5</div>
  <div class="button-item">6</div>
</div>