flex-grow-1在垂直方向不生效是因为父容器未进入Flex布局上下文，必须满足：父容器设d-flex flex-column、目标元素为直接子元素、父容器有明确高度（如min-vh-100），且避免与.col等冲突；推荐用flex: 1替代，因其设flex-basis: 0%更可靠。
flex-grow-1 为什么在垂直方向不生效
根本不是“加了就起作用”，而是浏览器压根忽略这个声明——因为没进入 Flex 布局上下文。最常见错误是：父容器没加 d-flex 和 flex-column，或者你试图给 .col 类元素加 flex-grow-1，但 .col 自带 flex: 0 0 auto，直接覆盖掉你的设置。
必须同时满足以下条件：
- 父容器有
d-flex flex-column（不能只靠.row，它默认不是 flex 容器） - 目标元素是该父容器的**直接子元素**（嵌套一层
div就失效） - 父容器自身有明确高度来源，比如
min-vh-100或显式min-height: 100vh - 避免混用
.col-*、width、min-width，这些会锁死尺寸分配逻辑
flex: 1 比 flex-grow-1 更可靠
flex-grow-1 只设 flex-grow: 1，其余沿用默认值（flex-basis: auto），容易被内容宽度拖住；而 flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，显式清空初始占位，让伸缩从零开始算，更符合“填满剩余空间”的直觉。
实操建议：
- 单个主内容区（如
<main>）填高：直接加flex: 1 - 侧边栏 + 主内容区：侧边栏用
flex: 0 0 240px，主内容区用flex: 1 - 含图片或
<iframe>的子项，额外加min-width: 0，否则固有尺寸会阻止收缩
父容器高度“塌陷”导致 flex: 1 白设
即使你给 <main> 加了 flex: 1，如果外层没撑开高度，它还是不会动。关键链路是：html → body → 外层容器 → 目标父容器。
必须确保：
-
html, body { min-height: 100%; }（注意是min-height，不是height） - 最外层容器（比如包裹
header/main/footer的那个div）加d-flex flex-column min-vh-100 - 别指望
.container或.row自动继承高度：.row默认只是 margin 实现 gutter，不是 flex 容器；.container永远是块级，需手动加min-height
iOS Safari 输入框聚焦时区域塌陷
移动端 Safari 在输入框聚焦时会缩放页面，可能触发父容器高度重算，导致 flex: 1 区域瞬间收缩甚至消失。这不是 Bug，是渲染机制问题。
临时缓解方案：
- 给 flex-item 加
min-height: 0（防止继承父级最小高度约束） - 避免在 flex-item 内部用
height: 100%，它依赖父高，而父高此时不稳定 - 若内容含长 URL 或无空格字符串，务必加
min-width: 0，否则换行逻辑失效，看起来像“没填满”
min-height 或没设 d-flex —— 它不会报错，只会安静地不工作。 
