flex-grow设为1未撑满父容器，根本原因是父容器缺乏明确宽度上下文，导致无剩余空间可分配；需确保父容器有width、max-width或为block布局，并检查flex-shrink:0与min-width干扰。
flex-grow 为什么设成 1 却没撑满父容器？
常见现象是子元素设置了 flex-grow: 1，但宽度卡在内容宽度不动，尤其当父容器没设 width 或用了 min-width: fit-content 时。根本原因是：flex 布局的“剩余空间”计算依赖父容器的可用宽度——如果父容器本身宽度未约束（比如在 display: inline-flex 容器里，或父级是 fit-content 行内块），flex-grow 就无空间可分。
- 确保父容器有明确宽度上下文：比如设
width: 100%、max-width，或父级是block且不受内容收缩影响 - 检查是否误加了
flex-shrink: 0且内容过长，导致 flex 项拒绝压缩，间接挤占了 grow 的空间分配逻辑 -
flex-grow是按比例分配“剩余空间”，不是按父宽百分比；若所有子项都设flex-grow: 1，它们等分剩余空间；设为2和1，则按 2:1 分配
flex-shrink 设为 0 后还是被压缩？
典型错误是以为 flex-shrink: 0 能完全锁死宽度，结果发现文字换行、图标缩放甚至整个元素仍变窄。这是因为 flex-shrink 只控制 flex 项在空间不足时的收缩权重，不阻止内容自身折叠（如文本自动换行、img 缺少 max-width: 100%）。
- 必须配合内容层约束：给文字容器加
white-space: nowrap，给图片加max-width: 100%和height: auto - 注意
min-width的干扰：即使flex-shrink: 0，若子元素有min-width: 200px且父容器更窄，浏览器仍会触发溢出而非压缩——此时需检查min-width是否合理 - IE11 对
flex-shrink: 0支持有 bug，建议统一用flex: 1 0 auto替代单独设flex-shrink
flex: 1、flex: auto、flex: none 的实际行为差异
这三个简写值看似简单，但参数组合直接影响子元素能否伸缩、是否受内容尺寸牵制。它们分别展开为：
-
flex: 1→flex: 1 1 0%：可伸可缩，基准尺寸为 0%，内容不影响初始分配（常用于均分容器） -
flex: auto→flex: 1 1 auto：可伸可缩，基准尺寸为内容宽度（适合“内容决定最小宽度 + 多余空间再分配”场景） -
flex: none→flex: 0 0 auto：不可伸不可缩，完全按内容宽高渲染（等价于flex-shrink: 0; flex-grow: 0;）
误用 flex: 1 在含长文本的卡片中，会导致文字被强制截断（因基准为 0%）；而该用 flex: auto 时用了 flex: 1，又会让小图标和短标签被拉得过大。
立即学习“前端免费学习笔记（深入）”；
移动端 Safari 中 flex-shrink 导致文字截断的兼容问题
iOS 15.4 之前版本对 flex-shrink 的实现存在偏差：当子元素含中文或混合文字时，即使设了 flex-shrink: 1，浏览器可能错误地将整行文字视为不可折行单元，最终触发 text-overflow: ellipsis 截断，而非正常换行压缩。
- 临时解法：给子元素显式加
min-width: 0（覆盖 Safari 默认的min-width: auto行为） - 更稳方案：避免依赖
flex-shrink压缩文字区域，改用width: 0; flex: 1强制从零开始分配空间，再靠overflow-wrap: break-word控制换行 - 验证方式：在真机上用
getComputedStyle(el).flexShrink检查是否返回字符串"1"，而非"0"（旧版 Safari 偶尔返回错误值）
flex 的自适应本质是空间博弈，不是魔法——每个 flex-grow 和 flex-shrink 都在和父容器宽度、兄弟元素尺寸、内容固有大小反复协商。最容易被忽略的，其实是那个没写出来的 flex-basis。
