flex-grow-1无效是因为父容器非Flex上下文或位置错误；必须确保父容器有d-flex/d-inline-flex、目标为直接子元素、清除width/min-width等干扰，并用flex:1更可靠。
flex-grow-1 加了没反应，不是属性写错了，而是它根本没被浏览器执行——因为父容器压根不是 Flex 容器，或者你加的位置不对。
为什么 flex-grow-1 无效？
它只在真正的 Flex 上下文中才起作用。常见失效原因：
- 父容器没加
d-flex或d-inline-flex——.row默认不是 Flex 容器（Bootstrap 5 的.row只靠 margin 实现 gutter，不带display: flex） - 目标元素不是父容器的**直接子元素**（比如嵌套在
.col里，而.col自带flex: 0 0 auto，会覆盖flex-grow: 1） - 子元素自己设了
width、min-width，或含超长无空格字符串（如 API key），导致“没有剩余空间”可分 - 父容器设了
flex-wrap: wrap，flex-grow只作用于当前行，不是整个容器
flex-grow-1 和 flex: 1 用哪个？
flex: 1 更可靠，它是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，显式清空初始占位，避免内容宽度干扰分配逻辑。
- 单个主内容区 + 固定宽侧边栏 →
flex-grow-1足够，但务必确保兄弟项是flex-shrink-0或固定宽（如flex: 0 0 240px） - 多个同级项均分剩余空间（如导航链接铺满）→ 用
flex: 1，更稳定 - 含图片、
iframe或长文本的子项 → 必须额外加min-width: 0，否则固有尺寸会锁死伸缩
垂直方向填满剩余高度怎么写？
仅靠 h-100 或 height: 100% 一定失败——它们依赖父元素有明确高度，而 .container、.row 都不自动继承高度。
- 最外层必须加
d-flex flex-column min-vh-100 - 需要撑高的中间区域（如
<main>）加flex-grow-1或flex: 1 - 别给中间区域里的
.table-responsive或.card设固定height，否则会覆盖 Flex 分配 - iOS Safari 输入框聚焦时页面缩放，可能导致区域塌陷 → 给该区域加
min-height: 0防继承父最小高度
真正起效的关键从来不是多加一个类，而是整条 Flex 链路都得对：每一级容器是否参与分配、每级是否显式定义了主轴尺寸、每个弹性项是否解除内容尺寸锁定。漏掉任何一环，flex-grow-1 就只是 HTML 里一行静静躺着的无效文本。
