javascript - 抽屉内容内的 Material UI 可滚动标签

我有一个基于mini 变体抽屉的 material-ui 抽屉。在抽屉内容中，我有一组基于防止滚动按钮选项卡的选项卡。我正在使用 material-ui 版本 4.12.3。

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

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

标签： javascriptcssreactjsmaterial-ui

在这里发布一个扩展 NearHuscarl 评论的答案以关闭它。

在我的示例中添加overflowX: hidden到内容 div 修复了它。请参阅此代码框以获取更新的代码。

发生此问题是因为可滚动选项卡的父级需要具有overflowX: hidden水平滚动功能才能工作。否则，可滚动选项卡只会导致其父级的宽度扩大。NearHuscarl 链接的有关此stackoverflow 答案的更多详细信息