align-items: stretch仅在父容器有明确高度或子元素未设height/min-height时生效；若父容器height为auto或子元素设height/min-height，stretch失效，需用flex: 1配合min-height: 0解决。
Flex容器子元素高度不随内容撑开？先看align-items默认值
Flex容器里子元素没高度，不是你代码写错了，大概率是align-items在“偷偷截断”。它的默认值是stretch，但这个行为只在**容器有明确高度**或**子元素没设height/min-height**时才生效。一旦父容器高度由内容决定（比如height: auto），又或者子元素写了height: 0、min-height: 0，stretch就直接失效。
- 检查父容器是否设置了
height、max-height或min-height——没有的话，align-items: stretch基本不起作用 - 子元素如果写了
height: 100%，但父容器没高度，结果就是0 -
align-items: stretch对flex-direction: column方向的主轴无效，它只管交叉轴（即垂直方向对row，水平方向对column）
为什么加了align-items: stretch还是没用？常见三类干扰项
很多人以为加了align-items: stretch就能一劳永逸，其实下面这些设置会直接覆盖它：
- 子元素显式设置了
height、max-height或min-height（哪怕只是min-height: 0） - 子元素用了
position: absolute——脱离文档流后，flex对其尺寸控制完全失效 - 父容器启用了
flex-wrap: wrap且子元素换行，此时每行是独立的交叉轴上下文，stretch只在当行内生效
真正让子元素撑满父容器高度的可靠组合
别依赖align-items单打独斗。要让子元素视觉上“填满”，得配合容器和子元素双向约束：
- 父容器设
display: flex+flex-direction: row（默认）+min-height: 0（防继承导致高度塌陷） - 子元素去掉所有
height/min-height，改用flex: 1（等价于flex: 1 1 0%） - 如果子元素内部还有嵌套flex，记得给它也加
min-height: 0——flex子项默认min-height: auto，会阻止向下传递拉伸
示例：
.container { display: flex; min-height: 0; }
.item { flex: 1; min-height: 0; }
.item > .inner { display: flex; min-height: 0; }
Chrome和Firefox对stretch的处理差异容易被忽略
老版本Firefox（align-items: stretch在flex-direction: column下的行为有bug：即使父容器有高度，子元素仍可能不拉伸。现代浏览器已修复，但如果你在维护旧项目，遇到高度不一致，优先检查：
- 是否用了
flex-direction: column+align-items: stretch—— 改成justify-content: stretch没用，那是主轴对齐，不能替代 - 是否在子元素上误加了
align-self: flex-start（它会覆盖父级align-items） - 用
getComputedStyle(el).height在控制台查真实计算值，比肉眼判断更准
撑开高度这事，本质是“谁负责提供基准高度”——Flex不生产高度，它只分配。别指望align-items无中生有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
