flex-grow 不起作用的根本原因是缺乏可用空间：父容器未设 display: flex 或主轴尺寸未定义，子元素 flex-basis/width 占满空间，或嵌套中断弹性链。
flex-grow 不起作用，根本不是属性写错了，而是它压根没“空间”可长——父容器主轴方向没有剩余宽度（或高度），或者子元素自己已经用 flex-basis、width、min-width 把空间占完了。
父容器没设 display: flex 或主轴尺寸未定义
这是最常被忽略的硬性前提：flex-grow 只对 Flex 容器的直接子项生效，且只在主轴有“可用空间”时才参与计算。
- 父容器必须有
display: flex（或inline-flex），否则所有flex-属性都会被浏览器静默忽略 - 水平布局（
flex-direction: row）下，父容器需有明确宽度：比如width: 100%、max-width: 1200px，不能仅靠内容撑开（width: auto） - 垂直布局（
flex-direction: column）下，height必须可计算：常见写法是min-height: 100vh或height: 100%（但需确保所有上级也传递高度） - 微信小程序中，父容器必须显式设
height（不能依赖flex-grow推导），否则子项的flex-grow直接不触发
子元素的 flex-basis 或 width 抢占了全部空间
flex-grow 分的是“剩余空间”，不是“整个容器宽度”。一旦子元素的基础尺寸（flex-basis 默认为 auto）已经接近或等于容器宽度，就几乎没“剩余”可分。
- 默认
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%，比单独写flex-grow: 1更可靠 - IE11 下即使设了
flex-basis: 0，也可能全部等宽——稳妥降级用width: calc(66.666%)+width: calc(33.333%)
嵌套 Flex 容器中断了弹性链
flex-grow 不穿透、不继承。它只响应**直接父容器**提供的空间上下文。中间只要漏掉一层 display: flex，整条链就断了。
- 典型场景：外层
.app是flex，中间.main-content设了flex-grow: 1占高，但没加display: flex；内层.test再写flex-grow: 1也完全无效 - 修复方法：给
.main-content加display: flex; flex-direction: column，让它成为真正的 Flex 容器 - 同时给
.test加min-height: 0：防止其内部有overflow: auto或嵌套 Flex 时，浏览器默认的min-height: auto阻断拉伸 - 移动端 Safari 软键盘弹出时，
100vh会临时缩容，导致flex-grow区域塌陷；改用min-height: 100dvh更稳
内容自身撑开导致无剩余空间可分
图片、长单词、未设 overflow 的文本块，都会产生固有尺寸（intrinsic size），把父容器“撑满”，让 flex-grow 失去操作对象。
- 检查 computed 样式中的
min-width和min-height，大概率是auto—— 这是 Flex item 的默认最小尺寸限制 - 对文本类子项，加
min-width: 0（水平）或min-height: 0（垂直），再配合overflow: hidden或word-break: break-all - 对图片，加
flex-shrink: 0防止被压缩变形，或设max-width: 100%保证不溢出 - 避免在同一个元素上混用
width和flex-basis：CSS 会以flex-basis为准，width被忽略（除非flex-basis: auto）
真正卡住人的从来不是 flex-grow 本身，而是它对尺寸链的强依赖——任意一环缺失（父容器没 display: flex、没主轴尺寸、子项设了固定宽、嵌套层漏声明、内容撑死），它就彻底沉默。调试时优先看 computed 样式里的 flex-basis 值和父容器主轴剩余空间是否为正，比反复改 flex-grow 数字有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
