flex-grow: 1 生效需同时满足父容器开启 Flex 上下文且主轴方向有明确尺寸；否则因非 Flex 项目或无剩余空间而失效，须检查 computed 中 Flex 标签及高度链完整性。
父容器没开 Flex 上下文，flex-grow: 1 直接被忽略
浏览器只对 display: flex 或 display: inline-flex 的直接子元素解析 flex-grow。如果中间夹了一层普通 div，比如：.layout 设了 display: flex，但它的子元素是 .wrapper（没设 display: flex），再往下才是目标 .content，那 .content 就不是 Flex 项目——flex-grow: 1 等同于没写。
用开发者工具选中目标元素，看「Computed」面板里有没有「Flex」标签亮起；不亮，说明父级没启用 Flex。嵌套结构中每一层要参与伸缩的容器，都得自己显式设 display: flex，不能靠继承。
父容器主轴尺寸缺失，根本没“剩余空间”可分
flex-grow: 1 不是魔法开关，它只分配「主轴方向上已知尺寸减去兄弟项占用后的剩余」。水平方向有 viewport 宽度兜底，但垂直方向没有默认高度——height: auto 的父容器，高度由内容撑开，结果就是“没剩余”。
- 填高场景必须给根容器或中间层加明确高度，如
min-height: 100dvh（比100vh更可靠，尤其 iOS 软键盘弹出时） - 若用
height: 100%，需确保html、body及所有祖先都有高度声明，否则链一断就失效 - 设了
flex-direction: column却忘了配高度？那flex-grow: 1作用在宽度上，对高度完全无效
子元素被自身样式锁死，flex-grow 失去作用空间
flex-grow 是“分剩余”，不是“强制拉伸”。一旦子元素有刚性限制，剩余空间就归零。
立即学习“前端免费学习笔记（深入）”；
-
height、min-height、max-height会直接覆盖伸缩逻辑 - 默认
flex-basis: auto→ 元素先按内容尺寸占位，内容一多就撑满，没空间留给 grow；推荐改用flex: 1（等价于flex: 1 1 0%） - 含长文本、图片或嵌套
display: flex的子项，浏览器会悄悄加min-height: auto，必须显式写min-height: 0才能解锁 - 超长无空格字符串（如一串 aaaaa）也会卡住，需配合
min-width: 0+word-break: break-word
别混淆 align-items 和 flex-grow 的作用轴
align-items: stretch 控制的是侧轴（cross axis），不是主轴（main axis）。flex-direction: row 时，它影响的是高度；column 时才影响宽度。想让子元素横向填满，该调主轴行为——flex-grow: 1 或 flex: 1，而不是反复调 align-items。
绝对定位子元素完全脱离 Flex 流，align-items 对它无效；而 flex-grow 本身也对它不起作用。
