子元素无法撑满剩余响应式空间的根本原因是父容器缺乏可计算的高度，尤其垂直方向需显式设置高度（如min-height: 100dvh），且每层参与伸缩的容器都必须声明display: flex和恰当的flex属性，否则flex-grow无空间可分。
子元素无法撑满剩余响应式空间，核心原因不是 flex-grow 写错了，而是父容器没“剩空间”可分——尤其在垂直方向，浏览器根本不知道该用多高来算“剩余”。
父容器必须有可计算的高度（特别是垂直方向）
水平方向有 viewport 宽度兜底，但垂直方向没有默认高度。哪怕写了 display: flex 和 flex-grow: 1，如果父容器 height 是 auto，它的 computed height 就是 0px 或内容高度，flex-grow 就无空间可分。
- 根级容器优先用
min-height: 100dvh（比100vh更稳，避免 iOS 软键盘缩 viewport） - 中间嵌套层若也参与纵向伸缩，它自己必须是
display: flex，且不能只靠继承——漏写就变普通块级容器，不传递高度上下文 - 别依赖
height: 100%向上追溯：必须同步给html和body加height: 100%，否则百分比失效 - 用开发者工具检查父容器的 computed
height：如果是auto或0px，问题就卡在这儿了
子元素的 flex-basis 必须归零才真均分
flex: 1 等价于 flex: 1 1 auto，而 flex-basis: auto 会让浏览器先按内容宽度/高度占位，再分剩余——含长文本、图片或 <input> 的子项，天然有 min-width: auto，起点宽，分得更多。
- 真正等宽/等高需显式设
flex: 1 1 0（注意是0，不是0%） - 替换元素（如
<img>、<textarea></textarea>）要额外加min-width: 0或min-height: 0，否则自带最小尺寸锁死伸缩 - 子项写了
width、min-width、max-width（哪怕只是min-width: 0）都会覆盖flex-basis，让flex-grow失效 - 父容器用了
gap，子项又自己加margin，总宽超限会触发flex-shrink，而不是你想要的flex-grow
column 布局下别指望 align-items: stretch 撑高
当 flex-direction: column 时，主轴是垂直方向，交叉轴是水平方向。align-items: stretch 控制的是子项**宽度**，和高度无关。想让子项填满父容器高度，得靠主轴行为——即 flex-grow: 1 或 flex: 1 1 0，前提是父容器有明确高度。
- 别给子项写
height: 100%：它不会向上取到父容器计算后的高度，反而阻断flex-grow，还可能引发循环计算 - 子项内有
overflow: auto或嵌套 flex 容器时，浏览器默认加min-height: auto，必须显式覆盖为min-height: 0 - 需要滚动时，
flex-grow: 1+min-height: 0+overflow-y: auto是最稳组合；overflow: hidden虽也能解除限制，但可能裁剪阴影或动画
嵌套 Flex 容器最容易被忽略的断裂点
外层有 min-height: 100dvh，中间一层只写了 display: flex，子项依然不撑高——因为中间层没声明 flex: 1，它只是个普通块级容器，不主动拉伸，也不向下传递高度约束。
- 每一层要参与伸缩的容器，都得自己设
display: flex，不能靠样式继承 - 中间层若设了
flex-direction: column，它自己也必须是display: flex，否则它的子元素不参与列向分配 - 用浏览器开发者工具的 “Flex” 标签页确认：目标父容器上该标签是否亮起；不亮 = Flex 上下文没启用
- 绝对定位子元素（
position: absolute）完全脱离 flex 流，flex-grow和align-items对它无效；如需覆盖层，改用inset: 0+z-index，并确保父容器position: relative
真正卡住的往往不是语法，而是某一层 DOM 结构里一个没重置的 min-height: auto，或某个祖先元素漏写的 height: 100%——这些地方看不见，但直接决定“剩余空间”是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
