如何不使用固定max-width避免滚动条？MUI Drawer适配问题

纯CSS实现方案 #

你不需要通过JS监听Drawer状态动态修改样式，两种纯CSS方案都可以解决问题：

• 方案1（优先推荐，不需要手动计算宽度）
  把页面整体调整为flex布局，利用flex自动分配宽度的特性适配Drawer的状态：
  1. 页面最外层容器设置 display: flex; width: 100vw; overflow-x: hidden;，保证整个页面宽度固定为视口宽度，不会出现横向滚动
  2. MUI Drawer作为固定宽度的子元素正常放置，主内容区域设置 flex: 1; overflow-x: hidden;，此时主内容区的宽度会自动扣除Drawer占据的宽度，不管Drawer是折叠还是展开状态都能自动适配
  3. 给目标UL设置 max-width: 100%; overflow-x: clip;，即可保证UL永远不会超出主内容区范围，hover时列表项宽度变大也不会触发滚动条
• 方案2（适配现有布局，无需调整结构）
  直接利用MUI Drawer自带的状态类做CSS匹配，不需要JS介入：
  MUI的Mini Drawer展开时会自带.MuiDrawer-open类，折叠时该类会被移除，你可以直接写对应的层级选择器：

  /* Drawer展开状态 */
  .MuiDrawer-root.MuiDrawer-open ~ .main-content ul {
    max-width: calc(100vw - 124px);
  }
  /* Drawer折叠状态 */
  .MuiDrawer-root:not(.MuiDrawer-open) ~ .main-content ul {
    max-width: calc(100vw - 65px);
  }
  

  把选择器里的.main-content替换成你实际主内容区域的类名即可生效。

小提示：如果列表项hover时有阴影、弹出层等效果，给UL设置overflow-x: clip比overflow-x: hidden效果更好，不会截断容器外的装饰元素。

内容的提问来源于stack exchange，提问作者Peter Boomsma