Overflow-x scroll doesn't work properly on mobile-CodePudding

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?

CodePudding user response：

The problem was that you added display none with this class.

.wrapper::-webkit-scrollbar {
  display: none;
}

after commenting on this class the 6 items appear correctly.

CodePudding user response：

If you add row class to your .css file, you will have 3 elements per row:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="wrapper">
        <div className="row">
          <div className="button-item">1</div>
          <div className="button-item">2</div>
          <div className="button-item">3</div>
        </div>
        <div className="row">
          <div className="button-item">4</div>
          <div className="button-item">5</div>
          <div className="button-item">6</div>
        </div>
      </div>
    </div>
  );
}

And add this to your .css:

.wrapper {
  overflow-x: scroll;
  max-height: 300px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.row {
  display: flex;
}