父容器需设显式高度（如100vh）且子项加min-height: 0，才能使flex: 1在column方向正常撑满剩余空间；滚动应作用于子项而非父容器，并配合overflow-y: auto和box-sizing: border-box。
flex-direction: column 时子项高度不撑开？检查父容器有没有显式高度
Flex 布局中 flex-direction: column 本身不决定子项高度是否自适应——它只控制排列方向。真正影响“高度能否撑开”或“能否填满剩余空间”的，是父容器是否有明确高度约束。
- 如果父容器没设
height或min-height（比如只写了display: flex; flex-direction: column;），那它默认是height: auto，子项就按内容自然撑高，flex: 1无效 - 想让某个子项（如
.main）填满剩余垂直空间，父容器必须有可计算的高度，常见写法：height: 100vh、min-height: 100vh、或由上层容器限定（如html, body { height: 100%; }） - 注意：百分比高度（如
height: 100%）在 flex 容器里依然依赖父级显式高度，不能替代vh或固定值
用 flex: 1 填满剩余高度但没效果？可能缺了 min-height: 0
即使父容器有 height: 100vh，某些浏览器（尤其 Chrome 120+）下 flex: 1 的子项仍可能被内容撑高、不收缩——这是 flex 项默认 min-height: auto 导致的。
- 给目标子项加
min-height: 0，强制允许它压缩到 0，才能让flex-grow: 1正常分配空间 - 等价写法：
overflow: hidden（隐式触发min-height: 0行为，但会隐藏溢出内容，慎用） - 示例：
.main { flex: 1; min-height: 0; overflow-y: auto; }—— 这样既填满空间，又支持滚动
子容器需要独立滚动？别在父容器上设 overflow
常见错误是给父容器（比如 .container）加 overflow: auto，结果整个页面出现双滚动条，或者 flex: 1 失效。
- 正确做法：父容器设
overflow: hidden，切断自身滚动；把overflow-y: auto加到具体要滚动的子项上（如.content） - 滚动子项必须有明确高度上限，否则
overflow-y不生效——所以它得是flex: 1（或flex-grow: 1）且父容器高度已定 - 如果子项内还有嵌套 flex 布局（如侧边栏 + 主体），同样要逐层应用
min-height: 0和flex: 1
高度自适应但内容被截断？优先用 overflow-y: auto 而非 scroll
overflow-y: scroll 会始终显示滚动条轨道（哪怕内容不够长），视觉突兀且占位；而 auto 只在需要时才出现，更符合直觉。
- 除非设计强制要求“永远显示滚动条”，否则一律用
overflow-y: auto - 配合
min-height: 0使用时，auto更稳定——某些情况下scroll会干扰 flex 尺寸计算 - 如果滚动区域顶部/底部有 padding 或 border，记得用
box-sizing: border-box，避免高度计算偏差
html → body → 最外层容器 → 子容器 → 滚动项，每一环都得确认有没有显式高度、有没有 min-height: 0、有没有意外的 overflow 干扰。漏掉任意一环，flex: 1 就只是个摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
