0

I have a material-ui drawer based on the mini variant drawer. Inside the drawer content, I have a set of tabs based on the prevent scroll buttons tabs. I'm using material-ui version 4.12.3.

Unfortunately, the tabs inside the drawer expand beyond the width of the screen and add a horizontal scrollbar. See this codesandbox for the code and example. I would have expected the tabs to just fill the width of the drawer content and to become scrollable, like in the material-ui example.

Is there any way to make those tabs work as they do in the material-ui example linked above, while keeping the drawer functionality as it is?

N.Jones
  • 149
  • 1
  • 13
  • One solution is you can add `width: "calc(100% - 73px)"` inside the `content` class in `MiniDrawer.js` to make it take only the available width of the screen. [Sandbox](https://codesandbox.io/s/mui-drawer-and-scrollbar-forked-0b2ug?file=/src/MiniDrawer.js:2603-2629) – Junaid Faryad Sep 29 '21 at 14:35
  • 1
    It's because the scrollable container uses flexbox: see https://stackoverflow.com/a/35609992/9449426 – NearHuscarl Sep 29 '21 at 15:07
  • @NearHuscarl I added `overflow: hidden` to the parent container as explained in the answer you linked and it worked. Thanks! See the code sandbox [here](https://codesandbox.io/s/mui-drawer-and-scrollbar-forked-jgmsg?file=/src/MiniDrawer.js:2603-2622) – N.Jones Oct 06 '21 at 11:15
  • @N.Jones You're welcome. That one took me a while, I was so stressed out while finding the solution that when I actually found it I don't have the energy left to write an answer and make a working demo. – NearHuscarl Oct 06 '21 at 11:32

1 Answers1

0

Posting an answer here that expands on NearHuscarl's comment to close this off.

Adding overflowX: hidden to the content div in my example fixed it. See this codesandbox for the updated code.

The issue was happening because the parent of the scrollable tabs needs to have overflowX: hidden in order for the horizontal scroll functionality to work. Otherwise the scrollable tabs just causes its parent's width to expand. More details on this stackoverflow answer linked by NearHuscarl

N.Jones
  • 149
  • 1
  • 13