flex容器必须设为d-flex且高度明确，否则flex-grow-1无法生效；需配合flex-column、显式高度（如min-vh-100或h-100）及完整高度继承链，才能使目标子项填满剩余垂直空间。
Flex容器必须设为 d-flex 且高度明确
Bootstrap 的 flex 工具类本身不自动撑满父容器高度，d-flex 只是启用 Flex 布局，但若父容器没显式高度（比如 height: 100% 或 vh），子项的“填满剩余高度”就无从谈起。常见错误是只加 d-flex flex-column 却忘了给容器设高。
实操建议：
- 容器需有可计算的高度来源：比如
min-vh-100、h-100（配合父级设height: 100%），或直接写style="height: 500px" - 垂直方向布局用
flex-column，确保子项按列排列 - 需要“填剩余高”的那个子项，加
flex-grow-1—— 这才是关键类名
flex-grow-1 是填充剩余高度的核心类
flex-grow-1 对应 CSS 的 flex-grow: 1，表示该元素在主轴（对 flex-column 来说是垂直方向）上拉伸，占满所有可用空间。它不是“设高度”，而是“分配剩余空间”，所以必须和其他兄弟元素共存才有意义。
典型结构示例：
<div class="d-flex flex-column h-100"> <header class="bg-light p-2">顶部</header><main class="flex-grow-1 bg-dark text-white p-3">这里填满剩余高度</main><footer class="bg-light p-2">底部</footer> </div>
注意：flex-grow-1 不能和 flex-shrink-0 冲突；如果某个兄弟项用了 flex-shrink-0 且内容超长，可能挤压 flex-grow-1 的空间。
避免 height: 100% 与 flex-grow-1 混用
有人会同时给 flex-grow-1 元素加 h-100，这反而可能导致溢出或布局错乱。因为 h-100 强制设为父高，而 flex-grow-1 是弹性分配，两者逻辑冲突。
正确做法：
- 去掉
h-100、h-75等固定高度类 - 确保该元素没有
max-height或overflow: hidden阻止拉伸 - 如果内部内容需要滚动，应在该元素上加
overflow-y-auto，而不是限制高度
IE11 下 flex-grow-1 不生效怎么办
Bootstrap 5 默认放弃 IE 支持，但若项目仍需兼容 IE11，flex-grow-1 会失效（IE 对 flex-grow 解析不一致）。此时不能依赖工具类，得回退到手动样式：
<main class="flex-grow-1 ie-flex-fill">...</main>
并补充 CSS：
.ie-flex-fill {
-ms-flex: 1;
flex: 1;
}
另外，IE11 中父容器必须设 display: -ms-flexbox，Bootstrap 4 的 d-flex 在 IE11 下虽可用，但某些嵌套场景需额外补丁。
真正容易被忽略的是：容器高度链是否完整 —— 从 html、body 到最外层 wrapper，每层都得有明确高度，否则 flex-grow-1 就像往虚空里拉伸。
