根本原因是父容器缺乏可计算的高度基准，需确保html/body设min-h-dvh或h-full，嵌套层显式设flex，子项避免h-/min-h-/self-类干扰stretch，flex-col下改用flex-1实现等高。
检查父容器是否具有可计算的高度
Flex子元素撑不满高度，90%的问题卡在父容器没有明确高度基准。浏览器不会凭空知道“剩余空间”是多少，flex: 1 或 align-items: stretch 都需要一个可计算的交叉轴尺寸才能工作。
用开发者工具看父容器的 computed height：如果显示 auto 或 0px，就直接定位到这一步了。
-
html和body必须同时设min-h-screen或h-full（仅设一个无效） - 根级容器优先用
min-h-dvh（比100vh更稳，尤其 iOS 软键盘场景） - 嵌套层若参与纵向伸缩，它自己也必须显式写
flex，不能只靠继承——漏掉就退化为普通块级容器 - 避免依赖
height: 100%向上追溯，除非你已确认整条祖先链（html→body→各层 wrapper）都有明确高度
确认 flex-direction 与 align-items 的作用方向是否匹配
很多人以为 align-items: stretch 总是控制高度，其实它只控制交叉轴——而交叉轴随 flex-direction 变化。方向一变，主轴和交叉轴就互换。
在 flex-col 下：align-items: stretch 拉伸的是子项的 width，不是 height；此时想让子项填高，得靠主轴行为（即 flex: 1）和父容器有高度。
- 删掉所有子项上的
self-start、self-center，它们会覆盖stretch - 别在
flex-col容器里写items-stretch并指望它撑高——它真正在干的事，是把子项拉宽到父容器宽度 - 想让子项在 column 布局下填满高度，正确组合是：
flex-col+ 父容器有明确高度 + 子项用flex-1
排查子元素自身是否禁用了拉伸逻辑
只要子元素显式声明了 height、min-height、max-height（哪怕只是 min-h-0），或用了 self-start、self-center，浏览器就会放弃 align-items: stretch 的拉伸逻辑，严格按你写的值渲染。
- 图片、
iframe、textarea等替换元素自带固有尺寸，即使没写高也可能抑制拉伸；可加h-full min-h-0强制参与 -
h-full在子项上非常危险：父容器高度未定义时，它算出来是0px，还顺手封死stretch - 嵌套 Flex 容器作为子项时，浏览器默认给它加
min-height: auto，这会导致它“拒绝塌缩”，阻断内部flex-1向下拉伸——必须显式加min-h-0 - 子项内有
overflow-y-auto时，min-h-0几乎必加，否则滚动层无法收缩
验证 flex: 1 是否满足生效条件
flex: 1 不是万能钥匙，它等价于 flex: 1 1 0，其中 flex-basis: 0 是关键——它让元素从零起点开始拉伸。但这个过程依赖三个前提：父容器是 Flex、父容器有高度、子元素没锁死最小高度。
- 父容器没写
flex？flex: 1直接被忽略 - 父容器
height是auto？“剩余空间”为 0，flex: 1就无处可分 - 子元素内容极少（比如只有文字），但浏览器默认
min-height: auto锁住高度下限？加min-h-0解锁 - 子元素写了
h-24、min-h-32等类？这些都会覆盖flex-basis，让flex-grow失效
最常被忽略的一点：嵌套 Flex 容器里，子 Flex 容器作为父 Flex 的子项，默认会被浏览器设 min-height: auto，这会导致它“拒绝塌缩”，进而阻断内部 flex-1 向下拉伸——必须显式加 min-h-0 才能破局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
