Bootstrap仅提供flex-grow-0和flex-grow-1，后者等价于flex: 1 1 0，受shrink和basis影响，并非单纯撑满；常见失效因父容器未设d-flex、overflow:hidden或混用栅格类。
Bootstrap 本身不提供独立的 flex-grow 工具类（如 flex-grow-2 或 flex-grow-auto），只内置了 flex-grow-0 和 flex-grow-1 —— 而且这个 flex-grow-1 实际等价于 flex: 1 1 0，不是单纯设 flex-grow: 1。这意味着它的行为受 flex-shrink 和 flex-basis 共同影响，不能直接当成“占满剩余空间”的万能开关。
为什么 flex-grow-1 不等于“撑满”
flex-grow-1 类在 Bootstrap 中被定义为 flex: 1 1 0，即 grow=1、shrink=1、basis=0。这带来几个实际影响：
- 当父容器宽度不足时，它会收缩（因为
shrink: 1），不一定“撑满”视觉预期 -
basis: 0是关键：它让元素初始宽度为 0，再按 grow 权重分配剩余空间——这对等分场景友好，但如果你希望某个元素“至少保留内容宽度”，就得额外加min-width或改用flex-basis: auto - 若兄弟元素有固定宽度（比如
w-25）但没设flex-grow-0，它仍可能参与 flex 计算，导致宽度异常
flex-grow-0 和 flex-grow-1 的典型使用场景
这两个类不是“可选配置”，而是明确的伸缩策略开关：
-
flex-grow-0：用于侧边栏、图标按钮、固定宽操作区——确保它不随容器拉伸，宽度由内容或显式width/w-*决定 -
flex-grow-1：适合中间内容区、表单输入框、卡片主体——但必须确认父容器是d-flex，且没有祖先节点设置overflow: hidden或min-width: 0干扰 shrink/grow 行为 - 两个同级元素都设
flex-grow-1→ 等分剩余空间；一个flex-grow-1+ 一个flex-grow-0→ 后者保持原宽，前者吃掉所有剩余
常见失效原因和绕过方式
Flex-grow 在 Bootstrap 中“看起来没生效”，90% 情况不是类写错了，而是环境限制：
- 父容器没设
d-flex，或者用了.row却忘了它默认是d-flex，但外层 wrapper 加了overflow: hidden→ 触发 flex shrink 截断 - 子元素内含未约束的图片或表格：
<img>缺max-width: 100%，<table>缺table-responsive→ 阻塞 flex item 收缩，进而让 grow 失效 - 混用
col-*和flex-grow-*→ 栅格系统靠flex-basis百分比计算，Flex 工具类靠权重分配，逻辑冲突，结果不可控 - 想“固定左右、中间自适应”，却用了
col-2 col-8 col-2→ 这是响应式比例，不是固定像素；正确做法是绕过.row/.col，直接用d-flex+flex-grow-0（左右）+flex-grow-1（中间）
要不要自己扩展 flex-grow 工具类
Bootstrap 官方只留了 0 和 1，但你确实可能需要 flex-grow-2 或 flex-basis-auto：
- 如果项目中多处要用不同 grow 权重（比如 1:2:1 布局），建议加自定义 CSS：
.flex-grow-2 { flex-grow: 2; }，而不是反复写style="flex-grow: 2" - 不要覆盖
flex-grow-1的原有定义，它绑定的是完整flex值；新类建议只设flex-grow，避免干扰 shrink/basis - 注意浏览器兼容性：IE11 支持
flex-grow，但部分旧版 Android WebView 有 bug，真要兼容得测display: -webkit-flex
真正难的不是写对 class，而是判断哪个祖先节点悄悄加了 min-width: 0 或 overflow: hidden，让 flex 计算链断裂。遇到“明明写了 flex-grow-1 却不动”，先查父容器的 computed style，再逐层往上 inspect overflow 和 min-width。
