侧边栏固定、主区域自适应滚动的 flex 布局需三层嵌套：外层 column 包头部与主体，主体 row 分侧边栏（flex: 0 0 200px）和内容区（flex: 1、overflow: auto、min-height: 0），内容区子容器需 height: 100% 才触发滚动；ie11 需用 flex: 1 1 0 替代 flex: 1 并确保 min-height: 0；侧边栏折叠时设 flex: 0 1 200px + min-width: 0 防闪动；暗色模式下主区域须显式设 background-color 隔离滚动条样式。
侧边栏固定、主区域自适应滚动的 flex 布局写法
直接用 display: flex + flex-direction: column 容易让主区域撑满全屏却无法滚动，实际要的是侧边栏定高/定宽、主区域占剩余空间且内部可独立滚动。
关键在三层嵌套：外层 flex-column 包住头部+主体；主体再用 flex-row 分侧边栏和内容区；内容区设 flex: 1 并加 overflow: auto。
- 侧边栏用
width: 200px（或flex: 0 0 200px）避免被压缩 - 主区域必须设
min-height: 0，否则 flex 子项默认不收缩，滚动失效 - 若主区域里有表格或长列表，需额外给直接子容器设
height: 100%，否则overflow不生效
body { display: flex; flex-direction: column; height: 100vh; } .main-layout { display: flex; flex: 1; min-height: 0; /* ← 这个最容易漏 */ } .sidebar { flex: 0 0 200px; } .content { flex: 1; overflow: auto; }IE11 下 flex 布局错位或高度塌陷
后台系统仍有不少 IE11 兼容要求，而它的 flex 实现有严重 bug：对 flex: 1 的计算错误，尤其嵌套时主区域高度为 0。
绕过方式不是降级为 Float，而是改用 flex: 1 1 0 显式声明基准值为 0，并配合 min-height: 0 强制收缩。
立即学习“前端免费学习笔记（深入）”；
- IE11 不支持
flex: 1简写，必须写全flex: 1 1 0 -
height: 100%在 flex 子项中不可靠，优先用min-height: 0 - 如果用了
calc(100vh - 60px)计算主区域高度，IE11 对calc里的单位敏感，必须写calc(100vh - 60px)，不能写calc(100vh - 60)
菜单展开后侧边栏宽度变化导致主区域重排
带折叠功能的侧边栏（如 Ant Design 风格），从 64px 展开到 200px 时，主区域会闪动或错位，本质是 flex 容器未预设最小宽度边界。
解决思路不是监听 js 动画帧，而是用 css 控制弹性行为：让侧边栏收缩时保持最小宽度，展开时允许伸展，同时主区域用 min-width: 0 配合 overflow-x: hidden 防文字溢出。
- 侧边栏设
flex: 0 0 64px→flex: 0 1 200px，注意第二个值是flex-shrink，设为 1 才能收缩 - 主区域加
min-width: 0，否则文字长时会强行撑宽整个布局 - 避免在侧边栏上用
transform: translateX()做展开动画，它脱离文档流，flex 无法感知尺寸变化
暗色模式下滚动条颜色与 flex 区域背景冲突
后台系统常配暗色主题，但 chrome 默认滚动条在深色背景上几乎隐形，用户找不到滚动区，尤其主区域内容多时。
不能只靠 ::-webkit-scrollbar 改颜色，因为 flex 容器内滚动条样式受父级 background-color 影响，需单独隔离背景色层级。
- 主区域容器设
background-color: var(--bg-body)，而不是继承父 flex 容器背景 - 滚动条 thumb 色值对比度至少 4.5:1，比如
#5a5a5a在#1e1e1e上才可读 - firefox 不支持
::-webkit-scrollbar，如需兼容，得用 JS 滚动库或接受其原生灰白滚动条
flex 布局本身不处理滚动条样式，但它的嵌套结构会让背景透传更隐蔽——这点调试时容易忽略，盯着 flex 属性看半天，其实问题出在滚动容器少了一行 background。