Flex子元素撑不开父容器高度的根本原因是父容器缺乏可计算的高度基准或子元素显式设置了height/min-height/max-height导致align-items: stretch失效；需确保父容器有min-height: 100vh等明确高度，且子元素未关闭拉伸开关。
Flex子元素撑不开父容器高度，根本原因不是子元素“不肯长”，而是父容器没给它可依附的高度基准，或者子元素自己关掉了拉伸开关——height、min-height、max-height只要显式写了任意一个，align-items: stretch就自动失效。
父容器的height和min-height必须可计算
Flex不生成高度，只分配已有空间。如果父容器height是auto（比如普通div没设高），那它的交叉轴尺寸就是0，子元素再怎么stretch也只能填0。
-
html和body没设height: 100%或min-height: 100vh，会导致后代里height: 100%算出来仍是auto -
min-height: 100vh比height: 100%更可靠，它不依赖上层高度链，直接锚定视口 - 用开发者工具看父容器的
computed height：如果是auto或0px，问题就卡在这儿了 -
position: fixed或absolute容器只写top: 0; bottom: 0时，部分旧版Firefox会误判为不可拉伸，显式加height: 100%更稳
height和min-height在子元素上是“关闭拉伸”的开关
子元素只要写了height、min-height或max-height（哪怕只是min-height: 0），浏览器就会放弃align-items的拉伸逻辑，完全按你写的值来渲染。
-
height: 100%看似合理，实则危险：父容器高度未定义时，100% 算出来是 0，还顺手封死了stretch -
min-height: auto是默认值，但它会阻止向下传递拉伸行为，嵌套Flex中常导致内层撑不开 - 替换元素（如
img、iframe）自带固有尺寸，即使没写height也可能抑制拉伸；可加height: 100%; min-height: 0;强制参与 - 临时验证：删掉子元素的
height和min-height，如果立刻等高，说明就是它们在干扰
flex-direction: column下，height/min-height的作用方向容易搞反
竖排布局时，主轴变垂直，交叉轴变水平。align-items: stretch此时控制的是子元素的width，跟高度无关。想让子元素填满父容器高度，得靠主轴上的分配逻辑。
- 错误写法：
.container { flex-direction: column; align-items: stretch; }→ 它只会把子项拉宽，对高度没影响 - 正确做法：父容器要有明确高度（如
min-height: 100vh），子元素用flex: 1（等价于flex: 1 1 0）在主轴上均分空间 - 避免在
column布局里给子项设height: 100%，它不会向上追溯到父容器高度 - 若子项需自适应内容高度而非均分，改用
justify-content: space-between或flex: 0 0 auto+min-height
最常被忽略的一点：你以为在调min-height，其实它所依赖的高度链早在html或body那一层就断了。逐层检查computed height，比反复改子元素样式快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
