侧边栏固定、主区域自适应滚动需三层嵌套：外层column包头部与主体，主体row分侧边栏（flex: 0 0 200px）和内容区（flex: 1、overflow: auto、min-height: 0），内容区子容器须height: 100%才触发滚动；ie11需用flex: 1 1 0并确保min-height: 0；侧边栏折叠时设flex: 0 1 200px加min-width: 0防闪动；暗色模式下主区域须显式设background-color隔离滚动条样式。
直接用 display: flex 套三层结构就能跑通，但漏掉 min-height: 0 或没处理好滚动上下文，主区域就会撑满却无法内部滚动——这是后台系统里最常卡住的点。
侧边栏固定 + 主内容区自适应滚动的三层嵌套结构
后台布局不是简单“左右分栏”，而是要让侧边栏不随内容滚动、主区域可独立滚动、头部固定、整体占满视口。必须用三层嵌套：
- 外层：
display: flex; flex-direction: column;包住.header和.main-layout，高度设为height: 100vh - 中层：
.main-layout { display: flex; flex: 1; min-height: 0; }—— 这个min-height: 0是关键，否则子项（尤其是.content）无法收缩，overflow: auto失效 - 内层：
.sidebar { flex: 0 0 200px; }（固定宽度），.content { flex: 1; overflow: auto; }，且.content的直接子容器需加height: 100%才能触发滚动
IE11 兼容：flex: 1 不生效怎么办
IE11 对 flex: 1 的解析有 bug，尤其在嵌套 flex 容器中，.content 高度可能直接塌成 0。不能降级用 float，而要显式写全：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 把
flex: 1改成flex: 1 1 0（IE11 不支持简写） - 确保父容器（即
.main-layout）同时设min-height: 0 - 避免在 IE11 中使用
calc(100vh - 60px)时漏单位——必须写calc(100vh - 60px)，不能写calc(100vh - 60)
侧边栏折叠时主区域闪动或错位
从 64px 展开到 200px 的过程，如果只改 width 或 flex-basis，Flex 容器会重排导致主区域抖动。根本原因是未预设最小宽度边界：
- 折叠态用
flex: 0 1 64px; min-width: 0;（min-width: 0防止浏览器强制维持旧宽度） - 展开态用
flex: 0 0 200px; - 不要依赖
transition: width，应统一用flex变化 +min-width控制，更稳定
暗色模式下滚动条样式被污染
Chrome/Firefox 的自定义滚动条（::-webkit-scrollbar）默认继承父容器背景色，当 .content 没设 background-color，滚动条轨道会透出深色背景，导致视觉断裂：
-
.content必须显式声明background-color（哪怕和 body 一致），隔离滚动条渲染上下文 - 若用 CSS 变量切换主题，确保
background-color在变量更新后同步重绘，否则滚动条残留旧色 - 移动端 Safari 不支持
::-webkit-scrollbar，该样式仅作桌面端增强，不可作为功能依赖
真正难的不是写对 flex 属性，而是每一层容器是否主动声明了收缩意愿（min-height: 0）、是否切断了样式继承链（如背景、滚动条）、是否在状态切换时保留了尺寸稳定性（min-width: 0）。这些点不手动验证，上线后问题只会出现在用户滑动到第 3 页表格时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
