flex-grow-1仅在父容器为Flex容器、目标元素为直接子项且无尺寸锁定时，按权重分配剩余空间；它不强制填满，起点为内容宽，而flex: 1因flex-basis: 0%更可控。
flex-grow-1 的实际作用是让元素在父容器有**剩余空间**时，按权重（默认为 1）参与分配——但它本身不保证“填满”或“撑开”，更不是万能的占位符。
为什么 flex-grow-1 经常没反应
浏览器压根不执行它，除非同时满足三个硬性条件：
- 父容器必须是真正的 Flex 容器：
d-flex或d-inline-flex，不能只靠.row（它只是带 margin 的普通 div） - 目标元素必须是该父容器的**直接子元素**；嵌套一层
<div>就失效 - 目标元素不能被其他样式锁死尺寸：
width、min-width、.col-*（自带flex: 0 0 auto）、超长无空格字符串（如 base64）都会导致“剩余空间 ≤ 0”
flex-grow-1 和 flex: 1 的关键区别
二者表面相似，但底层行为差异直接影响结果：
-
flex-grow-1只设flex-grow: 1，其余沿用默认值：flex-shrink: 1+flex-basis: auto→ 起点是内容宽度，容易被文字/图片撑住 -
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写 → 显式清空初始占位，伸缩从零开始算，更贴近“填满剩余空间”的直觉 - IE11 中
flex-grow-1完全无效，必须用flex: 1 1 auto或flex: 1 0 0
横向填宽 vs 纵向填高：约束方向不同
填宽和填高逻辑一致，但容易漏掉方向相关的高度来源：
- 横向（如侧边栏+主内容区）：
d-flex flex-row+ 侧边栏flex-shrink-0+ 主内容区flex: 1 - 纵向（如 header + main + footer）：外层必须加
min-vh-100，否则main没高度可撑；main加flex: 1，不是flex-grow-1 - iOS Safari 输入框聚焦时可能触发页面缩放，导致
flex: 1区域塌陷，此时需额外加min-height: 0
真正难的不是写对类名，而是判断当前 DOM 结构是否已构成有效的 Flex 上下文——flex-grow-1 不会报错，它只会安静地被忽略。
