开发左侧带侧边栏的仪表板时内容溢出/被遮挡该如何解决

核心问题原因 #

你的布局规则存在多处冲突，是异常的根源：

• .container设置为flex行布局，但.sidenav使用position: absolute脱离了文档流，flex布局不会为侧边栏预留空间，直接导致内容被遮挡
• 同时混用float、flex、绝对定位属性，float对后两种布局模式下的元素完全不生效，属于无效冗余代码
• 你将overflow-x: auto加在父容器.container上，而脱离文档流的侧边栏不参与父容器宽度计算，滚动时父容器会连带侧边栏一起偏移，出现第一张图的显示异常；移除该属性后内容溢出没有滚动容器，就出现第二张图的横向溢出问题

修复方案（二选一即可） #

方案1：侧边栏与内容同流布局（推荐，适配性最高） #

适合不需要侧边栏固定悬浮、随页面整体滚动的场景，移除所有冗余属性，用纯flex实现：

.container { 
  display: flex; 
  flex-direction: row; 
  min-height: calc(100vh - [你的header高度]); /* 替换为app-header的实际高度，避免页面整体溢出 */
}
.sidenav { 
  /* 移除position:absolute、float属性 */
  width: 5rem; 
  height: 100%; 
  overflow-x: hidden; 
  flex-shrink: 0; /* 禁止侧边栏被内容挤压压缩 */
}
.content { 
  /* 移除float、margin-left属性 */
  flex: 1; /* 自动占满侧边栏之外的所有剩余宽度 */
  overflow-x: auto; /* 内容溢出时仅内容区域出现横向滚动条 */
}

方案2：保留侧边栏固定悬浮效果 #

适合需要侧边栏固定在视口左侧、不随内容滚动的场景：

.container { 
  display: flex; 
  flex-direction: row; 
  overflow-x: hidden; /* 禁止父容器滚动 */
}
.sidenav { 
  position: fixed; /* 替换absolute为fixed，固定在视口左侧 */
  width: 5rem;
  height: 100%; 
  z-index: 1; 
  left: 0; 
  top: [你的header高度]; /* 替换为app-header的实际高度，避免遮挡顶部导航 */
  overflow-x: hidden; 
}
.content { 
  margin-left: 5rem; /* 宽度和侧边栏一致，避开遮挡 */
  width: calc(100vw - 5rem); /* 明确内容区域宽度 */
  overflow-x: auto; /* 内容溢出时仅内容区域出现横向滚动条 */
}

两种方案修改后都可以同时解决侧边栏遮挡、滚动异常的问题。

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