flex-grow: 1 无效的根本原因是父容器未提供主轴方向剩余空间，需确保 display: flex、明确宽高、避免 min-width/height auto 锁死及合理使用 flex: 1 和 min-width: 0/min-height: 0。
flex-grow 不是设了就自动撑满，它只在父容器有「主轴方向剩余空间」时才起作用。没反应不是语法错，是上下文缺失。
为什么 flex-grow: 1 常常没反应
根本原因是父容器没提供可分配的剩余空间，而不是属性写错了。常见失效点包括：
- 父容器漏了
display: flex或display: inline-flex—— 所有 flex 属性直接被忽略 - 父容器高度/宽度为
auto（比如没设min-height: 100vh），导致垂直或水平方向无“剩余”可分 - 目标元素内部有图片、
display: flex子项或长文本，被浏览器默认的min-height: auto或min-width: auto锁死，拒绝收缩换行 - 写了
width或height固定值，覆盖了 flex 的伸缩逻辑
必须配齐的父容器 CSS 条件
单独一个 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-basis: 0%显式清空初始占位，确保从零开始均分剩余空间 - 多个同级元素都设
flex: 1，它们等分剩余空间；设flex: 2和flex: 1，则按 2:1 分配 - 别和
width: 100%混用，会与 flex 计算冲突
容易被忽略的关键补丁：min-width: 0 和 min-height: 0
这是让 flex-grow 真正生效的隐形开关。Flex 项默认 min-width: auto / min-height: auto，会强制维持内容最小尺寸，导致无法压缩换行，也就没“剩余空间”可分。
- 所有需要填满剩余空间的 Flex 子项，只要内容可能超长（如长 URL、无空格字符串），都应加
min-width: 0 - 在垂直布局中，若目标区域要放滚动列表（如聊天记录），加
min-height: 0防止继承父级最小高度约束 - iOS Safari 输入框聚焦后页面缩放，常导致
flex: 1区域塌陷，min-height: 0是必要防护
真正卡住人的不是 flex-grow 本身，而是它对父级尺寸链的强依赖——只要任意一层没设好高度、display 或被 float/position: absolute 干扰，整个链就断了。嵌套越深，越要逐层用开发者工具检查 computed height/width，确认“剩余空间”是否真实存在。
