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?
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