flex-grow: 1 失效的根本原因是父容器缺乏明确的主轴尺寸和 flex 上下文：必须设 display: flex、合理 flex-direction，并确保主轴方向有确定高度或宽度，否则无剩余空间可分配。
直接写 flex-grow: 1 通常不够，必须配合父容器的 display: flex 和明确的主轴方向尺寸（尤其是高度），否则它根本不会“长”。
为什么 flex-grow: 1 在垂直布局里经常失效
它只在父容器有“剩余空间”时才起作用，而这个“剩余”是计算出来的：父容器主轴尺寸减去其他兄弟元素的占用。常见失效原因：
- 父容器没设
display: flex或flex-direction: column，flex-grow完全不解析 - 父容器高度依赖内容（比如
height: auto），导致没有“剩余”可填 - 中间嵌套了一层非 flex 容器（比如普通
div），flex-grow的作用域被截断 - 子元素本身设置了
min-height或height，覆盖了 flex 分配逻辑
flex-grow: 1 必须搭配的父容器设置
单独写 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-grow: 1 和 flex: 1 的区别与选法
flex-grow: 1 只控制放大行为；flex: 1 是 shorthand，等价于 flex: 1 1 0%，其中第三项 flex-basis: 0% 很关键：
- 写
flex-grow: 1却没重置flex-basis，元素仍按内容宽度/高度起步，可能撑开后挤压别人 - 写
flex: 1更稳妥，现代浏览器都支持，语义清晰，隐含了0%基准 - 多个同级元素都写
flex: 1，它们等分剩余空间；写flex: 2和flex: 1，则按 2:1 分配 - 文本类子项记得加
min-width: 0或overflow: hidden，防止长单词撑破 flex 分配
移动端和 Safari 下容易忽略的坑
iOS Safari 在软键盘弹出时会临时缩放视口，导致 100vh 失效，flex-grow: 1 区域高度塌陷：
- 用
min-height: 100dvh替代min-height: 100vh（dvh是动态视口单位，2023 年起主流支持） - 对 flex 子项加
min-height: 0，防止它继承父容器的最小高度约束，阻断 flex 分配 - 嵌套 flex 容器时，内层
flex-grow: 1只响应它的直接父容器，和外层高度无关——别指望“穿透式填充” - Tab 页面中底部固定 TabBar + 上方内容区，必须确保从根容器到内容区每一层都是
flex+column，漏一层就断
真正卡住人的不是 flex-grow: 1 本身，而是它对父级尺寸链的强依赖——只要任意一环没给明确主轴尺寸，它就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
