根本原因是父容器缺乏可计算的高度基准，导致 items-stretch 失效；需确保 html/body 设 h-full 或 min-h-screen，嵌套层显式设 flex，子项避免 h-/min-h-/self- 类干扰 stretch，flex-col 下改用 flex-1 实现等高。
根本原因不是 Tailwind 类没写对，而是父容器没有可计算的高度基准——flex 和 items-stretch 都在等一个“高度值”，但你只给了它 auto。
父容器没显式高度，items-stretch 就是空转
Flex 子项默认等高靠的是 align-items: stretch，但它不生成高度，只分配已有高度。如果父容器的 height 或 min-height 是 auto（比如普通 div 未设高），那它的交叉轴高度就是 0，子项再怎么 stretch 也只能填 0。
- 检查
html和body：必须同时加h-full或手动设height: 100%，否则h-screen在嵌套中会失效 - 根级容器优先用
min-h-screen或min-h-dvh（比100vh更稳，尤其 iOS 软键盘场景） - 中间嵌套层若参与纵向伸缩，它自己也得是
flex布局，不能只靠继承；漏写flex就变普通块级容器，高度链直接断掉 - 用开发者工具看父容器的 computed
height：如果是auto或0px，问题就卡在这儿了
子项写了 h-、min-h- 或 self- 类，等于主动关掉 stretch
只要子元素显式声明了 height、min-height、max-height（哪怕只是 min-h-0），或用了 self-start、self-center，浏览器就会放弃 align-items: stretch 的拉伸逻辑，严格按你写的值渲染。
- 删掉所有子项上的
h-24、min-h-32、max-h-60、self-start等类 -
h-full在子项上非常危险：父容器高度未定义时，它算出来是0px，还顺手封死 stretch - 图片、
iframe等替换元素自带固有尺寸，即使没写高也可能抑制拉伸；可加h-full min-h-0强制参与
flex-col 下 items-stretch 控的是宽度，不是高度
方向一变，主轴和交叉轴就互换。flex-col 时主轴是垂直方向，交叉轴变成水平方向——此时 items-stretch 拉伸的是子项的 width，跟高度无关。
- 想让子项在 column 布局下填满父容器高度，得靠
flex-1（即flex: 1 1 0），让它在主轴上均分可用空间 - 别在
flex-col容器里写items-stretch并指望它控制高度——它真正在干的事，是把所有子项拉宽到父容器宽度 - 若需滚动，滚动容器必须是子项内部的子元素（如
flex-1 overflow-y-auto），而非子项本身；且该滚动层要加min-h-0
最常被忽略的一点：嵌套 Flex 容器里，子 Flex 容器作为父 Flex 的子项，默认会被浏览器设 min-height: auto，这会导致它“拒绝塌缩”，进而阻断内部 flex-1 子项向下拉伸——必须显式加 min-h-0 才能破局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
