Kevin Powell - Community•3w ago

Problem with overflow-x

Hello, i have this custom inputs, but whenever i try to remove flex-wrap and add overflow-x, suddenly i need to scroll inside the filters container which is totally not what i want, i was wondering what is the cause of the issue, and how can i solve it code: https://codesandbox.io/p/sandbox/z442t7

10 Replies

yusefOP•3w ago

my intention was to make the filters horizontal scroll for smaller screens

Kevin Powell•3w ago

So you want it to have horizontal scrolling, but only at smaller screens? Could you just have the overflow-x: auto;, and then in a media query, do flex-wrap: wrap; overflow-x: revert?

yusefOP•3w ago

the problem is that the overflow creates another container/context that you have to scroll withing, outside the main page

yusefOP•3w ago

yusefOP•3w ago

 .filters-container {
      display: flex;
      justify-content: center;
      gap: 16px;
      max-width: 100vw;
      margin: 0 auto;
      align-items: flex-start;
      margin-top: 20px;
      overflow-x: auto;
    }
    @media (max-width: 1200px) {
    .filters-container{
      flex-wrap: wrap;
      overflow-x: revert;}
    }
    .filter-dropdown {
      position: relative;
      flex: 0;
      min-width: 200px;
    }

 .filters-container {
      display: flex;
      justify-content: center;
      gap: 16px;
      max-width: 100vw;
      margin: 0 auto;
      align-items: flex-start;
      margin-top: 20px;
      overflow-x: auto;
    }
    @media (max-width: 1200px) {
    .filters-container{
      flex-wrap: wrap;
      overflow-x: revert;}
    }
    .filter-dropdown {
      position: relative;
      flex: 0;
      min-width: 200px;
    }

i just tried it and it worked perfectly, thank you i was wondering what was causing the issue?

Kevin Powell•3w ago

If you have an overflow-x: auto, the overflow-y will also become auto, so it can potentially introduce vertical scrolling. You can't change the overflow in one axis without changing both (unless you use clip)

yusefOP•3w ago

alright, but doesnt overflow-x: revert, brings the original structure, how can i still have the horizontal scroll?

Kevin Powell•3w ago

if we only have that in the media query, we're only removing it when we also turn on the flex-wrap, so we're basically saying "start wrapping, and go back to handling overflows the original way"

yusefOP•3w ago

okay, so what if i want the filters to stay on one line always and get rid of the vertical overflow

Kevin Powell•2w ago

I tried to look at the sandbox, but looks like it was changed to something else. If you always want it to scroll, it shouldn't be an issue though?

Gaming

Programming

Problem with overflow-x

Did you find this page helpful?