bootstrap 5 默认不提供 flex-grow 工具类，需手动添加 style="flex-grow: 1" 或自定义 .flex-grow-1 类；父容器必须为 display: flex 且有明确高度，否则无效。
flex-grow 在 Bootstrap 5 中根本不起作用？
因为 Bootstrap 5 默认禁用了 flex-grow 的自动应用——它没给你写 flex-grow-1 这类工具类，也没在 .d-flex 容器里默认设 flex: 1。你直接写 style="flex-grow: 1" 能生效，但用原生类名想“靠类控制拉伸”，得手动加。
- Bootstrap 5 的弹性布局工具类只提供
d-flex、flex-row、justify-content-、align-items-等基础控制，不包含flex-grow-系列 - 如果你用的是 Sass 版本，可以自己扩展：在自定义 SCSS 中添加
@include utilities("flex-grow", $enable-flex-grow: true)（需先定义$enable-flex-grow: true） - CDN 或编译后 CSS 版本无法动态启用，只能手写内联样式或额外加 class
怎么让某个子元素在 flex 容器中占满剩余空间？
最稳的方式是直接加 flex-grow: 1 到该元素上，别指望 Bootstrap 类自动帮你干这事。
- 推荐写法：
<div class="d-flex"> <div>固定宽</div> <div style="flex-grow: 1">占满剩余</div> </div> - 如果要用 class 统一管理，建议自己定义一个：
.flex-grow-1 { flex-grow: 1; }，然后复用 - 注意：父容器必须有明确的
display: flex（即用了.d-flex），否则flex-grow无效 -
flex-grow值为0表示不拉伸（默认值），1是常见选择；多个元素都设1，会等分剩余空间
和 width: 100% 或 flex-basis 混用会出什么问题？
三者逻辑不同，混着用容易互相覆盖，尤其 flex-basis 优先级比 width 高，而 flex-grow 只在剩余空间里起作用。
-
width: 100%在 flex 子项上通常被忽略（除非flex: none），别依赖它来“撑开” -
flex-basis: 0+flex-grow: 1是经典组合，能确保严格按比例分配剩余空间（比如两个子项都设flex: 1，就各占 50%） - Bootstrap 的
.w-100类对 flex 子项基本无效，别试 - 错误现象举例：
style="width: 200px; flex-grow: 1"→ 元素先占 200px，再把剩余空间全拉过去，结果远超预期宽度
响应式场景下 flex-grow 为什么有时失效？
不是 flex-grow 失效，而是容器本身没高度，或者父级被 min-height: 0 截断了 —— 尤其在嵌套 flex 或使用 .vh-100 时常见。
- 检查父容器是否设置了
height或min-height；.d-flex本身不带高度，纯靠内容撑开 - 遇到卡片/侧边栏+主内容布局，主内容区域常需显式设
min-height: 0（防止溢出）+flex-grow: 1 - Bootstrap 的
.h-100不会自动传递高度给 flex 子项，得逐层确认 - 移动端小屏下，若容器被
overflow: hidden包裹，且子项拉伸后内容溢出，视觉上像“没拉伸”，其实是被裁了
flex-grow 本身，而是它依赖的那层容器有没有 height、有没有被 min-height 截断、有没有被其他 flex 属性悄悄覆盖。
