flex-grow: 1 失效是因为父容器缺乏可分配的剩余空间；需父容器设 display: flex、明确主轴尺寸（如 height 或 width）、避免 min-height: auto 锁死，并推荐用 flex: 1 替代。
flex-grow: 1 为什么没反应
直接写 flex-grow: 1 却没撑高，不是语法错，而是父容器根本没“剩余空间”可分。它只在 display: flex 容器中、主轴方向有明确尺寸（比如高度）时才起作用。
常见失效场景：
- 父容器漏了
display: flex或flex-direction: column - 父容器写了
height: 100%，但祖先链里某一级没设高度，导致继承中断 - 目标元素内部有图片、
display: flex子项或长文本，被默认的min-height: auto锁死，拒绝收缩 → 必须加min-height: 0
父容器必须配哪些 CSS 才能让 flex-grow 生效
单独一个 flex-grow: 1 是无效动作。它依赖父级提供「可分配空间」上下文：
- 父容器必须有
display: flex（或inline-flex） - 若要纵向填高：
flex-direction: column+ 明确高度，如min-height: 100vh或height: 500px - 若要横向填宽：保持默认
flex-direction: row，但父容器宽度也得是确定值（width: 100%或固定像素） - 避免父容器同时设
align-items: stretch和子项height，会冲突
flex: 1 和 flex-grow: 1 到底差在哪
flex: 1 是简写，等价于 flex: 1 1 0%；而只写 flex-grow: 1 会保留默认的 flex-shrink: 1 和 flex-basis: auto。
立即学习“前端免费学习笔记（深入）”；
问题出在 flex-basis: auto：它让元素先按内容尺寸渲染，再分剩余空间——结果内容一多，它就撑开，填不满。
所以推荐统一用：
-
flex: 1（最常用，语义清晰） - 或显式写全：
flex: 1 1 0%（尤其当目标区域要放滚动列表时，0%能确保从零开始均分） - 多个同级元素都设
flex: 1，它们等分剩余空间；设flex: 2和flex: 1，则按 2:1 分配
移动端和嵌套 Flex 容器的典型坑
iOS Safari 在软键盘弹出时会缩放视口，导致 100vh 失效，flex: 1 区域塌陷。解决方案：
- 用
min-height: 100dvh替代min-height: 100vh（dvh是动态视口单位，2023 年起主流支持） - 对
flex: 1的子项加min-height: 0，防止它继承父级最小高度约束 - 嵌套 Flex 容器时，内层的
flex-grow只响应它的直接父容器，和外层高度无关——别指望“穿透式填充” - Tab 页面中底部固定 TabBar + 上方内容区，必须确保从根容器到内容区每一层都是
flex+column，漏一层就断
flex-grow 本身，而是它对父级尺寸链的强依赖——只要任意一层没设好高度或 display，整个链就断了。 
