必须给父容器设明确高度（如min-height: 100dvh），否则flex: 1因无剩余空间而失效；需逐层设display: flex、flex-direction: column，并为flex子项加min-height: 0和overflow-y: auto。
必须给父容器设明确高度（比如 height: 100vh 或 min-height: 100dvh），否则 flex: 1 会完全失效——浏览器根本算不出“剩余”是多少。
为什么 flex: 1 不撑高？父容器没高度约束
Flex 子项的 flex: 1 不是“填满整个视口”，而是“填满父容器主轴方向上其他兄弟元素占位后的剩余空间”。如果父容器 height 是 auto（默认值），它的计算高度就是内容高度，剩余空间为 0，flex: 1 就没东西可分。
- 用开发者工具检查父容器的
computed height，若显示auto或0px，这就是根因 - 根级容器推荐
min-height: 100dvh（比100vh更稳，避开 iOS 软键盘缩 viewport） - 嵌套层级中，每一层参与纵向伸缩的容器都必须显式设
display: flex和flex-direction: column，不能靠继承
flex: 1 要配合 min-height: 0
子元素默认 min-height: auto，这意味着它不会被 Flex 压缩到比内容更小的高度。当内容极少（比如空 div 或单行文本）时，flex: 1 看似生效，实则卡在内容高度，无法真正“拉伸”。
-
min-height: 0解锁收缩能力，让flex: 1可从零起点向上拉伸 - 这个补丁在子项内含
img、textarea、或嵌套了另一个 Flex 容器时几乎必加 - 别写
height: 100%——它会阻断flex-grow，还可能引发循环计算
垂直滚动要手动开 overflow-y: auto
flex: 1 只负责撑满空间，不负责滚动。内容溢出时想出现滚动条，必须显式设置：
- 父容器需是
flex-direction: column - 子元素加
overflow-y: auto（或overflow: auto） - 若子元素内还有 Flex 子项，它们也得配
min-height: 0，否则内部溢出会被截断
最易被忽略的是：嵌套 Flex 容器里，flex: 1 的“剩余空间”只来自**直接父容器**，和外层高度无关。哪怕你给 html 和 body 都写了 height: 100%，只要中间某一层漏了 display: flex 或 height，链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
