flex-grow-1 失效主因是父容器未设 d-flex；混用 col 类、存在 width/min-width、内容过长或 flex-wrap: wrap 均会阻碍其生效；flex: 1 比 flex-grow-1 更适合均分剩余空间。
flex-grow-1 在 Bootstrap 5 中确实能填充剩余空间，但**它不是万能的，多数失效场景都源于对 flex 布局前提条件的忽略**。
为什么 flex-grow-1 加了没反应
最常见原因是父容器没启用 flex 布局——flex-grow-1 是 flex item 的属性，没有 d-flex（或 d-inline-flex）就完全不生效。
- 检查父元素是否加了
d-flex，且子元素是它的直接子项 -
col类和flex-grow-1混用会冲突：col内部有flex: 0 1 auto，覆盖了flex-grow: 1 - 子元素自身有
width、min-width或内容过长（如未换行的长单词），会锁死尺寸，导致“无剩余空间”可分 - 父容器高度不足或设置了
flex-wrap: wrap，让子项换行后主轴方向改变，flex-grow失效
flex-grow-1 和 flex: 1 的实际差异
flex-grow-1 只设置 flex-grow: 1，其余保持默认（flex-shrink: 1, flex-basis: auto）；而 flex: 1 是 flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 的简写，后者更利于“从零开始均分剩余空间”。
- 想让一个元素独占剩余宽度，用
flex-grow-1就够了（前提是其他兄弟项flex-grow: 0） - 多个同级项要按比例分剩余空间，比如导航链接平均分布，
flex: 1更可靠，因为flex-basis: 0避免了内容宽度干扰 - 如果某列需要固定宽（如侧边栏），建议用
flex: 0 0 200px，而不是只靠w-25或col-2
三栏布局中左右固定、中间自适应的最小可行写法
这不是栅格问题，是 flex 布局问题。别用 col-2 col-8 col-2——那是等比缩放，不是固定+自适应。
- 父容器必须是
d-flex - 左侧：加
flex-grow-0+style="width: 200px"或flex: 0 0 200px - 中间：加
flex-grow-1（或更稳妥的flex: 1） - 右侧：同左侧，
flex-grow-0+ 固定宽 - 避免给中间列加
width、min-width，否则它可能拒绝伸展
<div class="d-flex"> <aside class="flex-grow-0" style="width: 200px;">左侧</aside> <main class="flex-grow-1">中间自适应</main> <aside class="flex-grow-0" style="width: 240px;">右侧</aside> </div>
容易被忽略的兼容性补丁
即使所有结构都对，flex-grow-1 仍可能卡住——尤其当内容含长文本、图片或内联元素时。
- 临时加
min-width: 0到flex-grow-1元素上，解除浏览器对“最小内容宽度”的保护 - 如果内容是文字，确认没漏掉
word-break: break-word或overflow-wrap: break-word - 在 Firefox 中遇到异常，可尝试加
align-self: stretch强制拉伸 - IE 不支持 flex，Bootstrap 5 明确放弃 IE9 以下，这点不用妥协
d-flex、子项被内容撑死、或者混用了栅格与 flex 类——这些点比记住所有辅助类更重要。 
