父容器高度为auto导致flex-grow失效，需设明确高度或min-height；子元素设height会覆盖flex-basis使flex-grow失效；column布局中align-items不影响高度；嵌套flex需子项加min-height: 0。
父容器没高度，flex-grow 就是空转
子元素写了 flex: 1 或 flex-grow: 1 却不撑高，90% 的原因是父容器的 height 是 auto。Flex 布局不会凭空“猜”出剩余空间——水平方向有 viewport 宽度兜底，垂直方向没有默认高度，flex-grow 没空间可分，自然失效。
检查方式：用开发者工具看父容器的 computed height。如果是 auto 或 0px，问题就卡在这儿了。
- 根级容器优先用
min-height: 100dvh（比100vh更稳，避免 iOS 软键盘缩 viewport） - 中间嵌套层若参与纵向伸缩，它自己必须显式写
display: flex，不能只靠继承 - 别依赖
height: 100%向上追溯：要生效，html和body都得加height: 100%
子元素写了 height 就等于关掉了 flex 拉伸
height: 100%、height: 200px、甚至 min-height: 0 都会覆盖 flex-basis，让 flex-grow 失效。这不是 bug，是 CSS 计算逻辑：一旦你声明了高度，浏览器就认为你已接管控制权。
- 想让子项填满剩余空间，优先用
flex: 1（等价于flex: 1 1 0），而不是height: 100% - 如果必须用百分比高度，确保整条祖先链都有明确高度（
html→body→ 父容器） - 替换元素（如
<img>、<textarea></textarea>）要额外加min-height: 0，否则自带最小尺寸锁死伸缩
column 布局下 align-items 根本不管高度
当 flex-direction: column 时，主轴是垂直方向，交叉轴是水平方向。align-items: stretch 控制的是子项**宽度**，和高度无关。它默认开启，写不写通常没区别。
想让子项在列布局中占满高度，只能靠主轴行为：
- 给子项设
flex: 1（推荐） - 或确保父容器有明确高度，并让子项不写任何 height 相关属性
-
justify-content: stretch不合法，别试
嵌套 Flex 容器里子项不长高？先加 min-height: 0
子 Flex 容器内部有内容，但父 Flex 高度还是塌陷，常见于嵌套场景。根本原因是浏览器对 Flex 子项默认加了 min-height: auto，它会阻止子 Flex 收缩——但也可能卡住它扩展。
遇到“内容很多，父容器就是不长高”，优先检查子 Flex 是否漏了：
.child-flex { min-height: 0; }- 这个规则在 Chrome 80+、Firefox 68+、Safari 14.1+ 是必需的
- 尤其当子 Flex 内部用了
flex: 1或动态加载内容时
真正麻烦的点往往不在第一层 flex，而在嵌套三层之后那个被 min-height: auto 默默锁住的子容器——它不报错，也不提示，只是静静不长高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
