应给flex容器的直接父元素加min-height，而非flex容器自身设height: 100%，因bootstrap的d-flex等类仅启用flex布局却不提供高度约束，导致父容器高度为0与子项stretch行为形成循环依赖。
直接给 flex 容器的父元素加 min-height，而不是在 flex 容器自己身上写 height: 100% —— 这是 Bootstrap 场景下最稳、最不容易断链的解法。
为什么 Bootstrap + Flex 容器会塌成 0 高？
Bootstrap 的 .d-flex、.flex-column 等类只是启用了 display: flex，但不会自动给容器设高度。浏览器按规范计算：弹性容器的自动高度只看自身内容盒，不继承子项 stretch 行为；而子项设了 flex: 1 或 align-self: stretch 后，又反过来依赖父容器提供“可用高度”——双方都在等对方先定高，结果就是父容器 computed height = 0。
常见于以下组合：
<div class="d-flex flex-column"><div class="flex-fill">（<code>.flex-fill实际是flex: 1 1 auto）- 模态框
.modal-body内部套.d-flex，但没给.modal-dialog或.modal-content设最小高度 - 使用
.row（本质是display: flex）嵌套.col，而.col里再套.d-flex且子项要撑高
Bootstrap 中该给哪一层加 min-height？
必须加在 flex 容器的直接父元素 上，不是它自己，也不是更上层的 wrapper。
例如：
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body d-flex flex-column">
<header>...</header><main class="flex-fill">...</main><footer>...</footer>
</div>
</div>
</div>
这里 .modal-body 是 flex 容器，它的父元素是 .modal-content。所以应该写：
.modal-content {
min-height: 500px; /* 或 min-height: 80vh */
}
而不是给 .modal-body 加 height: 100% —— 因为 .modal-content 默认是 height: auto，100% 就等于 0。
其他典型位置：
-
.card内部用.d-flex→ 给.card加min-height -
.container下直接.d-flex→ 给.container加min-height - 用
.d-grid或.d-flex做全屏布局 → 给最外层 wrapper（如.app-layout）加min-height: 100vh，并考虑降级到100dvh
Bootstrap 自带类能不能替代 min-height？
不能直接替代，但可辅助：
-
.h-100（即height: 100%）必须配合祖先明确高度才能生效，否则无效；它常被误用为“撑高”，实际只是个百分比换算器 -
.min-vh-100是 Bootstrap 5+ 提供的min-height: 100vh快捷类，可用，但要注意 iOS Safari 地址栏缩放导致vh失准的问题，建议搭配min-height: 100dvh使用 -
.flex-fill只对已有高度的 flex 容器内子项起作用，它本身不创造高度，也不影响父容器 -
.d-flex和.flex-column不带任何尺寸约束，纯布局行为
别指望 .d-flex 自动解决塌陷 —— 它只是开启弹性布局，不是高度锚点。
两层 flex 嵌套时最容易漏掉哪一层？
第二层 flex 容器的父元素，也就是第一层 flex 的子项。
比如：
<div class="d-flex flex-column h-100">
<header>...</header><div class="d-flex flex-row"> <!-- 这里是第二层 flex -->
<aside>...</aside><main class="flex-fill">...</main>
</div>
</div>
外层 .d-flex.flex-column 已设 h-100，但它能生效的前提是它的父容器（比如 .container）有高度。而内层 .d-flex.flex-row 要撑满剩余空间，它的父元素（即外层的中间子项）必须有高度 —— 但这段 div 没 class，也没设 min-height，它高度由内容决定，于是内层 flex 容器就塌了。
真正卡住人的，从来不是 flex: 1 写得对不对，而是某一层父元素默默没高度，还看不出错在哪。
