根本原因是flex-grow只分配主轴剩余空间，若初始尺寸占满容器则无剩余空间可分；需统一flex-basis为0、确保父容器尺寸可计算、保持弹性链完整、清理min-width等干扰项。
flex-grow 相同但宽度不同，根本原因不是 grow 值错了
因为 flex-grow 从不直接决定最终宽度，它只分配“主轴上已存在的剩余空间”。如果子元素的初始尺寸（由 flex-basis、width 或内容撑开）已经占满容器，剩余空间为 0，flex-grow: 1 和 flex-grow: 999 效果完全一样——都是静默不执行。
检查 flex-basis 是否被内容或 width 覆盖
默认 flex-basis: auto 会让浏览器先按内容宽度定起点。一个含长文本的 <div> 和一个空 <code><div> 同时设 <code>flex: 1，前者起点就大，最终必然更宽。
- 写
flex: 1等价于flex: 1 1 auto，不是flex: 1 1 0 - 想真正等宽，必须显式写
flex: 1 1 0或flex-basis: 0 -
width、min-width、max-width会覆盖flex-basis，尤其固定像素值（如width: 200px） - 图片、
<input>、<textarea></textarea>等替换元素自带min-width: auto，需额外加min-width: 0
父容器尺寸不可计算，flex-grow 失去上下文
flex-grow 需要一个明确的主轴可用空间才能工作。如果父容器宽度/高度是 auto（比如被浮动、绝对定位影响，或没设 width/height），浏览器无法算出“剩余空间”，grow 就不会触发。
- 水平布局（
flex-direction: row）：父容器必须有明确width，如width: 100%、max-width: 1200px - 垂直布局（
flex-direction: column）：父容器需可计算高度，常见写法是min-height: 100vh或逐层设height: 100% - 微信小程序中，父容器必须显式设
height，不能依赖flex-grow推导 - 移动端 Safari 软键盘弹出时
100vh会缩容，改用min-height: 100dvh更稳
弹性链中断：中间漏了 display: flex
flex-grow 只响应**直接父容器**提供的空间上下文。中间任何一层没设 display: flex 或 display: inline-flex，整条链就断了。
- 典型场景：
.app是 flex 容器，.main-content设了flex-grow: 1占高，但没加display: flex；其子元素再写flex-grow: 1也完全无效 - 修复方法：
.main-content加display: flex+flex-direction: column - 同时给子元素加
min-height: 0：防止内部有overflow: auto或嵌套 Flex 时，浏览器默认的min-height: auto阻断拉伸
flex-basis）没拉平、空间（父容器尺寸）不可算、链条（中间 display）断了、干扰项（min-width、替换元素）没清理。每个环节都得单独验证，不能只盯着 flex-grow 值本身。
