父容器必须有明确高度约束才能让 flex: 1 生效；若 height 或 max-height 为 auto，则子元素仅按内容渲染，不会拉伸，常见表现为高度塌缩或卡在单行文本高；根级推荐 min-height: 100dvh，嵌套层需显式设 display: flex 和 flex-direction；flex: 1 等价于 flex: 1 1 0，依赖 flex-basis: 0 从零拉伸，且需配合 min-height: 0 防止子项因默认 min-height: auto 而无法收缩；height: 100% 易因祖先链高度缺失而失效，且会阻断 flex-grow；垂直滚动需 overflow-y: auto + flex-direction: column；嵌套时每层都须主动声明 flex 布局，不可依赖继承；box-sizing: border-box 可避免 padding/border 导致撑不满。
父容器必须有明确高度约束才能让 flex: 1 生效
浏览器不会凭空知道“剩余空间”是多少。如果父容器的 height 或 max-height 是 auto（默认值），flex: 1 就会失效——子元素只按内容高度渲染，不会拉伸。
常见错误现象：子元素高度卡在一行文本高，或整个区域塌缩；用开发者工具检查父容器的 computed height，若显示 auto 或 0px，问题就在这里。
- 根级容器推荐用
min-height: 100dvh（比100vh更稳，避开 iOS 软键盘导致 viewport 缩小） - 嵌套层若参与纵向伸缩，它自己也必须是
display: flex，不能只靠继承 - 避免依赖
height: 100%向上追溯，除非你已给html和body显式设了高度
flex: 1 比 height: 100% 更可靠，但要注意 min-height: 0
flex: 1 是 Flex 原生能力，它不查父高，只按剩余空间动态分配；而 height: 100% 要求整条祖先链都有明确高度，稍有遗漏就断掉。
但 flex: 1 不是万能钥匙：子元素若含图片、textarea、长段落等，默认 min-height: auto 会锁死收缩行为，导致它无法压缩到低于内容高度——这时必须显式加 min-height: 0。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0是关键，它让元素从零起点开始拉伸 - 别在子元素里写
height: 100%，它会阻断flex-grow，还可能引发循环计算 - 子项内有
overflow: auto或嵌套 Flex 容器时，min-height: 0几乎必加
垂直滚动要配合 overflow-y: auto 和父容器主轴方向
仅靠 flex: 1 只能撑满空间，不会自动触发滚动；要让内容溢出时出现滚动条，得在子元素上加 overflow-y: auto（或 overflow: auto），同时确保父容器是 flex-direction: column。
注意：align-items: stretch 在 column 布局下控制的是子项**宽度**，和高度无关；想填高，必须靠主轴行为（即 flex: 1）和父容器的高度约束。
- 优先用
max-height（如max-height: calc(100vh - 60px)）而非固定height，更利于响应式留白 - 移动端可加
-webkit-overflow-scrolling: touch提升滚动流畅度（非必需但推荐） - 如需隐藏水平滚动条，额外加
overflow-x: hidden到子元素
嵌套 Flex 容器中 flex: 1 失效的典型场景
外层设了 flex: 1，内层也设了，但内层没撑开——大概率是外层没把“剩余空间”真正传下去。嵌套时每一层都必须主动声明 display: flex 和方向，不能假设高度会自动透传。
典型误判：Tab 页面中，底部 TabBar 固定高，上面内容区设 flex: 1 却无效 → 检查中间是否漏了某层容器的 flex-direction: column 或 display: flex。
- 内层 Flex 容器不要设
height: 100%，它会强制拉伸，失去自适应能力 - 调试时临时加
outline: 1px solid red查看各层真实尺寸范围 - 遇到
position: absolute、transform或overflow: hidden的祖先，它们会创建新的 containing block，height: 100%可能参照错对象，但flex: 1不受影响
实际最易被忽略的一点：父容器的 padding 和 border 会占用空间，若用了 box-sizing: content-box（默认），又没在 max-height 计算中扣除，就会导致子元素撑不满或溢出。建议统一加 box-sizing: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
