flex-grow 失效是因为父容器无剩余空间或弹性链中断；它只分配已存在的主轴剩余空间，不强制拉宽，需确保父容器尺寸可计算且中间元素显式设 display: flex。
flex-grow 失效不是属性错了，是没空间可分
flex-grow 从不“强制拉宽”，它只负责把父容器主轴上**已存在的剩余空间**按系数分配。如果子元素的 flex-basis、width 或内容本身已经占满容器宽度（或高度），剩余空间为 0，flex-grow 就彻底静默——浏览器不会报错，也不会在 computed 样式里标红，但它就是不执行。
常见现象：flex-grow: 1 写了但子元素宽度纹丝不动；开发者工具里看到父容器 width 已被撑满，computed 的 flex-basis 是 auto，且实际尺寸接近容器全宽。
- 水平布局（
flex-direction: row）下，父容器必须有明确width（如width: 100%、max-width: 1200px），不能仅靠内容撑开（width: auto） - 垂直布局（
flex-direction: column）下，height必须可计算：常见写法是min-height: 100vh，或逐层确保上级也设height: 100% - 微信小程序中，父容器必须显式设
height（不能依赖flex-grow推导），否则直接不触发
子元素基础尺寸抢光了“剩余空间”
flex-grow 分的是“剩余空间”，不是“整个容器”。而这个“剩余”的起点，由 flex-basis 决定——默认是 auto，即按内容宽度起步。一个含长文本的 div 和一个空 div 同时设 flex-grow: 1，前者起始宽就大，最终必然更宽，比例失真。
显式写了 width: 300px 或 flex-basis: 400px，会直接覆盖起点，导致 flex-grow 没机会介入。
- 想严格按系数均分？统一设
flex-basis: 0，例如flex: 2 1 0和flex: 1 1 0 -
flex: 1等价于flex: 1 1 0%，第三个值是百分比，但行为上和0类似；更稳妥写法是flex: 1 1 0 - IE11 下即使设了
flex-basis: 0，也可能全部等宽——降级用width: calc(66.666%)+width: calc(33.333%)
嵌套中断弹性链，flex-grow 不穿透
flex-grow 只响应**直接父容器**提供的空间上下文。中间漏掉一层 display: flex，整条链就断了。典型场景：外层 .app 是 flex，中间 .main-content 设了 flex-grow: 1 占高，但没加 display: flex；内层 .test 再写 flex-grow: 1 也完全无效。
- 修复方法：给
.main-content加display: flex和flex-direction: column - 同时给
.test加min-height: 0：防止其内部有overflow: auto或嵌套 Flex 时，浏览器默认的min-height: auto阻断拉伸 - 移动端 Safari 软键盘弹出时，
100vh会临时缩容，导致flex-grow区域塌陷；改用min-height: 100dvh更稳
width 设置失效，其实是 flex-shrink 在捣鬼
Flex 子项的 width 失效，根本原因不是 flex-grow 不工作，而是默认 flex: 0 1 auto 中 flex-shrink: 1 开启压缩，且 flex-basis: auto 优先于 width 生效。width: 50% 只是初始参考，真正参与主轴分配的是 flex-basis 和 flex-shrink。
- 关掉收缩开关：
flex-shrink: 0，但必须同时明确flex-basis，否则仍可能回退到auto - 推荐写法：
flex: 0 0 50%（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%） - 避免混合：
width: 200px和flex-basis: 50%不要共存，浏览器行为不一致 - 父容器宽度没定死（比如
display: inline-flex），flex-basis: 50%就失去参照，结果不可控
flex-grow 很老实，它只做分配，不做创造。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
