加了d-flex父容器高度仍为0，是因为d-flex仅改变display属性，未提供高度锚点；浏览器按flex规范计算时，弹性容器自动高度只依赖自身内容盒，不继承子项stretch行为，导致父子间高度依赖循环而塌陷为0。
为什么加了 d-flex 父容器还是高度为 0
不是 d-flex 没生效，而是它只改了 display，没给容器“高度锚点”。浏览器按 Flex 规范计算：弹性容器的自动高度只看自身内容盒，不继承子项的 stretch 行为；而子项设了 flex: 1 或 align-self: stretch 后，又反过来依赖父容器提供可用高度——双方都在等对方先定高，结果就是 computed height = 0。
典型触发场景：
-
<div class="d-flex flex-column"><div class="flex-fill"></div></div>—— 外层没高度，flex-fill白加 - 模态框里
.modal-body.d-flex，但.modal-content是height: auto -
.row内套.d-flex，而.row上层没设min-height
必须在哪一层加 min-height 才有效
加在 flex 容器的直接父元素 上，不是它自己，也不是更上层 wrapper。因为 min-height 需要作用于那个“还没被 Flex 启动、但能提供高度上下文”的节点。
常见位置对应关系：
-
.modal-body是 flex 容器 → 给.modal-content加min-height -
.card > .d-flex→ 给.card加min-height -
.container > .d-flex→ 给.container加min-height - 全屏布局用
.app-layout.d-flex→ 给.app-layout加min-height: 100vh（或100dvh保移动端）
别给 .d-flex 自己加 height: 100% —— 它的父级若无显式高度，100% 就等于 0。
Bootstrap 工具类怎么选：min-vh-100 还是 h-100
min-vh-100 是首选，h-100 多数时候无效。
-
min-vh-100=min-height: 100vh，保证至少一屏高，内容超长时仍可自然扩展 -
h-100=height: 100%，只在父级有明确高度时才生效；若父级是height: auto，它就塌成 0 - Bootstrap 4 不带
min-vh-*，得手写style="min-height: 100vh;" - 移动端 Safari 地址栏缩放可能导致
100vh计算偏小，可降级用100dvh（需检查兼容性）
容易被忽略的底层约束：html 和 body
就算你给最外层容器加了 min-vh-100，如果 html 或 body 没撑开，它还是没用。
- 必须确保：
html, body { min-height: 100%; }（注意是min-height，不是height） - 否则
100vh在某些旧环境里会失效，min-vh-100也会失去参照 - 如果页面有粘性页脚，
min-height: calc(100vh - 60px)比硬写100vh更稳妥
真正卡住人的，往往不是 flex 类加没加对，而是这一整条高度链里某一处悄悄断掉了。
