flex-fill不是等高/等宽万能开关，仅在真正flex容器中对直接子项生效，行为受flex-direction和父容器尺寸约束；用错会破坏栅格比例或导致布局崩溃。
flex-fill 不是万能的“等高/等宽开关”，它只在**真正的 flex 容器中、对直接子项生效**，且行为取决于父容器的 flex-direction 和尺寸约束。用错地方不仅无效，还会破坏栅格比例或导致布局崩溃。
为什么直接给 .col 加 flex-fill 没反应
因为 .col 的宽度由 flex-basis（如 flex: 0 0 33.333%）控制，加 flex-fill 相当于覆盖成 flex: 1 1 auto，直接废掉响应式断点（比如 col-md-6 失效）。更关键的是：.row 默认启用了 flex-wrap: wrap，一旦内容超宽，flex-fill 就会退化或被压缩。
- 不要写：
<div class="col-md-4 flex-fill"> - 要等宽填满一行，改用：
<div class="d-flex flex-nowrap"><div class="flex-fill"></div><div class="flex-fill"></div></div> - 如果必须保留
.col结构，统一设flex-basis: 0更稳：class="col-md-4 flex-fill flex-basis-0"
flex-fill 在卡片内部撑开 .card-body 的正确姿势
等高卡片的关键不是让所有 .card 高度一致，而是让每张卡片里的 .card-body 占满剩余空间，从而对齐底部按钮。这时 flex-fill 才真正有用——但它必须用在 .card-body 上，且前提是一整套 flex 链完整。
-
.card必须是 flex 容器：class="card h-100 d-flex flex-column" -
.card-body加flex-fill：<div class="card-body flex-fill"> -
.card-header和.card-footer不加高度限制，保持自然尺寸 - 外层
.col必须有高度来源：class="col-md-4 h-100"，且其父.row不能是height: auto
flex-fill 和 flex-grow-1 到底差在哪
两者视觉常一样，但底层行为不同：flex-fill 是 flex: 1 1 auto，而 flex-grow-1 只设 flex-grow: 1，其余靠浏览器默认（flex-shrink: 1, flex-basis: auto）。差异在边界场景：
- 内容极少时，
flex-fill因flex-basis: auto仍会参考文字宽度，可能撑不开；flex-grow-1更“激进”一点 - 兄弟项中有
flex-shrink: 0时，flex-grow-1项可能被压缩，flex-fill因含flex-shrink: 1更抗挤压 - 都不支持响应式前缀（
flex-lg-fill无效），需配合媒体查询或断点类手动控制
移动端 Safari 下 flex-fill 高度异常怎么办
当父容器用 min-height: 100vh 时，Safari 地址栏缩放会导致视口高度计算偏差，h-100 + flex-fill 就会失效或溢出。
- 把
min-vh-100或style="min-height: 100vh"改成min-height: 100dvh -
dvh是动态视口单位，能响应地址栏显示/隐藏变化 - 注意：IE 和旧版 Safari 不支持
dvh，需降级 fallback（如 JS 检测 + class 切换）
flex-fill 最容易被忽略的一点：它不解决“父容器没高度”的问题。无论怎么加，只要 .row 或 .col 没继承到明确高度，flex-fill 就只是个摆设——它拉伸的是“剩余空间”，而不是凭空造高度。 
