flex-grow-1失效的根本原因是flex布局前提未满足：父容器缺d-flex、目标元素非直接子项、或被.col-* / width / min-width等样式锁死空间。
flex-grow-1 加了没反应，不是它坏了，是 Flex 布局前提没搭好——父容器缺 d-flex、目标元素不是直接子项、或被 .col-* / width / min-width 等样式锁死了空间。
为什么 flex-grow-1 不生效
浏览器根本不会读它，除非父容器是真正的 Flex 容器。常见失效链：
- 父元素没加
d-flex或d-inline-flex（.row默认不是 Flex 容器，它只是靠 margin 实现 gutter） - 目标元素嵌套在
.col-*里：Bootstrap 的.col自带flex: 0 0 auto，会覆盖flex-grow: 1，DevTools 里能看到该属性被划掉 - 子元素自己设了
width、min-width，或含超长无空格字符串（如 API key、base64），导致“剩余空间 ≤ 0” - 父容器用了
flex-wrap: wrap：此时flex-grow只作用于当前行，不是整个容器高度/宽度
flex-grow 权重怎么算才靠谱
数值不是百分比，是分配权重比。但实际宽度 = 内容原始宽 + 分得的剩余空间。起点不一致，结果就失真。
- 三个子项分别设
flex-grow: 1、2、1，若内容宽度分别是 80px、240px、100px，容器宽 600px → 剩余空间 = 600 − (80+240+100) = 180px → 按 1:2:1 分配 → 最终宽 ≈ 125px / 330px / 145px - 想让比例真正落地，必须统一
flex-basis：用flex: 1 0 0替代flex-grow: 1，其中flex-basis: 0显式清空初始占位 - 含图片、iframe 的子项额外加
min-width: 0，否则固有尺寸会阻止收缩/伸展 - IE11 要写成
flex: 1 1 auto或更稳妥的flex: 1 0 0，单独flex-grow: 1在 IE 中无效
横向填宽 vs 纵向填高，怎么写才稳
填宽和填高逻辑一致，但约束方向不同，容易漏掉关键点。
- 横向布局（如侧边栏 + 主内容区）：
父容器加d-flex flex-row，侧边栏用flex-shrink-0+ 固定宽（如width: 240px），主内容区用flex: 1 - 纵向布局（如 header + main + footer）：
外层必须加d-flex flex-column min-vh-100，否则main没高度可撑；main加flex: 1，不是flex-grow-1 - iOS Safari 输入框聚焦时页面缩放，可能让
flex: 1区域塌陷，此时给该区域加min-height: 0防继承父最小高度 -
.container和.container-fluid永远不是 Flex 容器，别指望它们自动参与高度分配
flex-fill 和 flex-grow-1 到底选哪个
二者语义接近，但行为差异藏在 flex-basis 里。
-
flex-fill是flex: 1 1 auto，基准按内容宽度起手，适合多个同级项均分剩余空间（如导航链接铺满） -
flex-grow-1是flex-grow: 1，其余保持默认（flex-shrink: 1,flex-basis: auto），更适合单个主内容区独占剩余空间 - 无论用哪个，只要内容含长单词或 URL，都得额外加
min-width: 0才能真正换行填满 -
flex-fill只对直接子元素生效，且要求父容器是d-flex，不继承
最常被忽略的是：Flex 项目只认**直接父容器**的主轴剩余空间。外层没高度/宽度约束，内层再怎么设 flex: 1 都白搭——尤其在 .row 和 .container 套嵌结构里，这点几乎必翻车。
