必须用三层嵌套flex结构：外层column包头部与主体，中层main-layout设display: flex、flex-direction: row、min-height: 0，内层.sidebar用flex: 0 0 200px、.content用flex: 1、overflow: auto且其直接子容器需height: 100%才触发滚动。
侧边栏固定、主内容区自适应滚动的布局，必须用三层嵌套 Flex 结构，漏掉 min-height: 0 或没给内容区子容器设 height: 100%，滚动就会失效——这是上线前最常被忽略的两个点。
为什么 flex: 1 的内容区不占满也不滚动？
表面看写了 flex: 1，但主区域高度为 0 或撑满全屏却无法内部滚动，根本原因不是 flex 写错了，而是父容器没走完整 Flex 流程：
-
.main-layout（即侧边栏 + 内容区的直接父容器）必须同时设display: flex、flex-direction: row和min-height: 0 - 只写
flex: 1不够，IE11 下必须显式写成flex: 1 1 0，否则高度塌陷 -
.content设了overflow: auto后，它的**直接子容器**必须加height: 100%，否则滚动上下文不成立 - 不要把
display: flex加在body上，某些浏览器会干扰height: 100vh计算
侧边栏折叠时主区域闪动或错位
从 64px 展开到 200px 的过程出现抖动，不是 transition 没生效，而是浏览器在重排时被隐式最小宽度卡住了：
- 展开态用
flex: 0 0 200px，折叠态改用flex: 0 1 64px（注意是flex-shrink: 1，不是0） - 必须同步加
min-width: 0，否则文字、图标等内联内容会强制撑开侧边栏 - 别用
transition: width，它和 flex 布局不协同；只过渡flex-basis和padding - 内部文字层用
transform: scaleX(0)配合transform-origin: left控制显隐，比width或opacity更稳
移动端适配不能靠 display: none
单纯在小屏下给侧边栏加 display: none，会破坏 Flex 布局流，导致内容区卡片错行、按钮点击偏移：
- 保持 DOM 存在，把
.main-layout的flex-direction改成column - 侧边栏加
order: -1，让它排到顶部；内容区加order: 1 - 配合
width: 100%和flex-wrap: wrap，让内部卡片自动单列排列 - IE11 不支持
order，若必须兼容，得降级为flex-direction: column-reverse+margin-top模拟
真正卡住人的从来不是“怎么写 flex”，而是哪一层该加 min-height: 0、哪个子容器要补 height: 100%、以及折叠时要不要放开 min-width——这些点一漏，整个布局就静默失效，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
