抽屉内容内的 Material UI 可滚动标签答案

【问题标题】：Material UI Scrollable Tabs inside Drawer content抽屉内容内的 Material UI 可滚动标签
【发布时间】：2021-09-29 14:24:46
【问题描述】：

我有一个基于 mini variant drawer 的 Material-ui 抽屉。在抽屉内容中，我有一组基于prevent scroll buttons tabs 的选项卡。我使用的是 Material-ui 版本 4.12.3。

不幸的是，抽屉内的标签扩展超出了屏幕的宽度并添加了一个水平滚动条。有关代码和示例，请参阅此 codesandbox。我本来希望选项卡仅填充抽屉内容的宽度并变为可滚动的，就像在 material-ui 示例中一样。

有什么方法可以让这些选项卡像上面链接的 material-ui 示例中那样工作，同时保持抽屉功能不变？

【问题讨论】：

一种解决方案是您可以在MiniDrawer.js 的content 类中添加width: "calc(100% - 73px)"，使其仅占用屏幕的可用宽度。 Sandbox
这是因为可滚动容器使用了flexbox：见stackoverflow.com/a/35609992/9449426
@NearHuscarl 我将overflow: hidden 添加到父容器中，如您链接的答案中所述，它有效。谢谢！见代码沙箱here
@N.Jones 不客气。那件事花了我一段时间，在找到解决方案时我压力很大，以至于当我真正找到解决方案时，我没有精力写答案和做一个有效的演示。

【解决方案1】：

在此处发布扩展 NearHuscarl 评论的答案以关闭此问题。

在我的示例中将 overflowX: hidden 添加到内容 div 修复了它。更新代码见this codesandbox。

之所以出现此问题，是因为可滚动选项卡的父级需要具有overflowX: hidden 才能使水平滚动功能正常工作。否则，可滚动选项卡只会导致其父级的宽度扩大。有关此 stackoverflow answer 的更多详细信息，由 NearHuscarl 链接

【讨论】：