flex-grow无效的根本原因是父容器无剩余空间或未形成Flex上下文；需确保父容器有明确尺寸、设display:flex、子元素为直接子项，且清除min-width/min-height等隐式限制。
flex-grow 无效，先看父容器有没有剩余空间
flex-grow 不是“让元素变大”，而是“把父容器里没被占完的空间，按系数分给子元素”。如果父容器本身没剩下空间，flex-grow 就彻底没机会执行。
常见现象：子元素写了 flex-grow: 1，但宽度/高度纹丝不动，检查 computed 样式发现父容器的 width/height 已被其他子元素或内容撑满，主轴方向上剩余空间为 0。
- 父容器设了
flex-wrap: wrap？换行会重置主轴剩余空间计算逻辑，flex-grow只在当前行内生效 - 子元素有显式
width、min-width或flex-basis（比如flex-basis: 200px），直接抢占了空间，导致后续无“剩余”可分 - 父容器自身没高度约束（如
height: auto且无min-height），尤其在垂直布局中，.main { flex-grow: 1 }会因父级高度未定义而失效
flex-grow 在垂直方向不生效，大概率缺 height 约束
水平方向靠 viewport 宽度天然撑开，但垂直方向没有默认“可用高度”。flex-grow: 1 想拉伸高度，前提是父容器必须有明确的高度上下文。
- 根容器（如
.app）要加min-height: 100vh或height: 100%（需确保所有上级也传递高度） - 中间层容器（如
.main-content）若设了flex-direction: column，它自己也得是display: flex，否则它的子元素根本不是 flex item，flex-grow直接被忽略 - 子元素内部含
overflow: auto或嵌套 flex 容器时，浏览器默认加min-height: auto，必须显式覆盖为min-height: 0才能让flex-grow正常拉伸
flex-grow: 2 和 flex-grow: 1 不等于 2:1 宽度比
比例不是简单除法，而是“先按 flex-basis 占位，再把剩余空间按系数切”。内容尺寸会显著干扰结果。
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-basis: auto→ 基于内容宽度占位。一个子元素含长文本，另一个为空div，前者基础宽就大，即使flex-grow小，最终也可能更宽 - 想严格按系数分配？统一设
flex-basis: 0，例如flex: 2 1 0和flex: 1 1 0，这样起点归零，增长才纯粹按系数来 - IE11 下该逻辑异常：即使设了
flex-basis: 0，也可能全部等宽。稳妥降级用width: calc(66.666%)+width: calc(33.333%)
微信小程序或旧版 Safari 中 flex-grow 表现异常
平台实现差异会让 flex-grow 看似“失效”，但其实是默认行为或兼容性限制被触发。
- 微信小程序要求父容器必须有明确
height（不能只靠flex-grow推导），且子元素不能被position: absolute或transform干扰文档流 - Safari（尤其旧版本）对
min-height: 0解析不稳定，建议同时加height: 0或改用flex: 1（它等价于flex: 1 1 0，隐式设了flex-basis: 0） - 所有现代浏览器中，
flex: 1比单独写flex-grow: 1更安全——后者会继承默认flex-shrink: 1和flex-basis: auto，容易在空间不足时意外收缩
flex-grow 的，往往不是属性写错，而是父容器没空间、没高度、没 flex 上下文，或者子元素被默认最小尺寸锁死了伸缩下限。这些点漏掉任何一个，它就安静地躺平。 
