flex-grow-1无效的根本原因是父容器未设d-flex或d-inline-flex，导致Flex上下文缺失；必须确保父容器启用Flex布局、子元素为直接子项、主轴方向明确且有剩余空间可分配。
父容器没设 d-flex，flex-grow-1 就是摆设
加了 flex-grow-1 却没反应？第一件事不是调样式，而是打开 DevTools 看父元素有没有 d-flex 或 d-inline-flex。Flex item 的弹性行为只在 Flex 容器上下文中生效，否则浏览器直接忽略 flex-grow。常见翻车点：
-
.row默认不是 Flex 容器（Bootstrap 5 的.row仅靠 margin 实现 gutter） -
.container永远是块级元素，display: block，不参与 Flex 分配 - 混用
col类：它自带flex: 0 1 auto，会覆盖flex-grow: 1
纵向填高必须设 flex-direction: column
Flex 填的是主轴方向的“剩余空间”。横向布局（flex-direction: row）下 flex-grow-1 拉宽；纵向布局才拉高。所以要填剩余高度，得确保父容器同时满足：
-
display: flex（即d-flex） -
flex-direction: column（即flex-column） - 有明确高度来源（如
min-vh-100、height: 100vh，或上层已撑开）
典型结构：<div class="d-flex flex-column min-vh-100"><header></header><main class="flex-grow-1"></main><footer></footer></div>
flex-grow-1 不撑高？检查高度传递链是否断裂
Flex 项只认**直接父容器**的主轴剩余空间。如果外层高度没定义，内层再怎么设 flex-grow-1 都无效。最容易漏掉的环节：
-
html和body缺少min-height: 100%（影响vh计算和 Flex 高度继承） - 中间包裹层（比如
<main>）没设flex-grow-1，却直接给.container加——它不是d-flex的直接子项 - iOS Safari 输入框聚焦时页面缩放，导致父容器高度塌陷，此时需给该层加
min-height: 0
内容含长单词或 URL，flex-grow-1 仍会溢出
即使 flex-grow-1 生效，Flex 项默认 min-width: auto，遇到一长串无空格字符（如 API key、URL）时，它拒绝收缩，导致换行失败、内容溢出。必须协同处理：
- 给目标元素加
min-width: 0（解除最小宽度锁定） - 对内部文本加
word-break: break-word或overflow-wrap: break-word - 避免同时设
white-space: nowrap（哪怕来自继承）
更稳妥写法是直接用 flex: 1（等价于 flex: 1 1 0%），其中 flex-basis: 0% 显式清空初始占位，比单独 flex-grow-1 更可控。
