flex-grow-1失效的根本原因是缺乏Flex布局前提：父容器未设d-flex（或d-inline-flex），目标元素非直接子项，或存在width/min-width、col类冲突、flex-wrap: wrap、内容过长等干扰因素。
为什么 flex-grow-1 加了没反应
它根本不是“加了就生效”的开关，而是依赖一整套 flex 布局前提。最常见失效原因是父容器没设 d-flex ——flex-grow-1 是 flex item 的样式，没有 flex 容器上下文，浏览器直接忽略它。
- 检查父元素是否真有
d-flex（或d-inline-flex），且目标元素是它的**直接子元素** - 避免和
col类混用：col内部自带flex: 0 1 auto，会覆盖flex-grow: 1 - 子元素自身若带
width、min-width或含超长无空格字符串（如 API key），也会锁死尺寸，导致“无剩余空间”可分 -
flex-wrap: wrap会让主轴方向在换行后变化，flex-grow在换行后只作用于当前行，不是整个容器
flex-grow-1 和 flex-fill 到底用哪个
二者语义接近，但行为细节不同：flex-fill 是 flex: 1 1 auto，而 flex-grow-1 只设 flex-grow: 1，其余保持默认（flex-shrink: 1, flex-basis: auto）。
- 想让一个项目独占剩余空间，且兄弟项宽度固定（比如侧边栏+主内容区），
flex-grow-1足够用 - 多个同级项都要均分剩余空间（比如导航链接横向铺满），
flex-fill更稳妥，因为flex-basis: auto能更好响应内容宽度差异 - 如果内容含长单词或 URL，
flex-fill仍需额外加min-width: 0才能真正换行填满；flex-grow-1同理 -
flex-fill只对直接子元素生效，且要求父容器是d-flex或d-inline-flex，不继承
嵌套 Flex 中 flex-grow-1 不撑高怎么办
它只认**直接父容器**的主轴剩余空间，外层高度缺失或未显式定义，内层再怎么设都白搭。典型翻车点是 .row 和 .container。
-
.row默认不是display: flex容器（Bootstrap 5 的.row仅靠 margin 实现 gutter），想让它参与高度分配，必须手动加d-flex flex-column -
.container和.container-fluid永远是块级元素，永远不带display: flex，别指望它们自动伸展 - 常见结构如
header + main + footer，必须在外层加d-flex flex-column min-vh-100，然后给main加flex-grow-1 - iOS Safari 输入框聚焦时页面缩放，可能导致
flex-grow-1区域塌陷，此时加min-height: 0可防继承父最小高度
更可靠的替代写法：flex: 1
比起单独用 flex-grow-1，flex: 1 是更底层、更可控的选择——它是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，其中 flex-basis: 0% 显式清空初始占位，避免内容宽度干扰分配逻辑。
- 多个兄弟项都设
flex: 1，会严格等分剩余空间；想不等分，改第一个参数，比如flex: 2占比是flex: 1的两倍 - 不要和
width混用，尤其别写width: 100%，会与 Flex 计算冲突 - 若某列需固定宽（如 200px 侧边栏），用
flex: 0 0 200px，而不是依赖w-25或col-2 - 内容可能超长时，仍要配
min-width: 0，否则flex-basis: 0%会被min-width: auto锁死
height、min-height、d-flex，以及有没有被栅格类悄悄覆盖。
