Skip to content
Advertisement

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?

Advertisement

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.

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement