Flex子元素被挤压是因flex-shrink:1默认生效且缺最小尺寸约束；应设min-width/min-inline-size或合理配置flex-basis，慎用flex-shrink:0以防溢出。
Flex子元素被挤压的典型表现
窗口变窄时，flex子元素突然换行、文字截断、图标错位，甚至宽度塌缩为0——这不是bug，而是flex-shrink: 1默认生效 + 缺少最小尺寸约束导致的预期行为。
必须设置min-width或min-inline-size
Flex容器不会自动保护子元素内容不被压缩；浏览器会优先满足容器总宽约束，把子项往死里缩，直到min-width拦住它。
- 对文字类子项（如
<div class="title">），设min-width: fit-content或具体值（如min-width: 120px） - 对图标+文字组合，建议包裹一层
display: flex容器，并给该容器设min-inline-size: max-content - 避免只依赖
white-space: nowrap：它只防换行，不防缩容，flex-shrink仍可把它压扁
flex-shrink: 0不是万能解，慎用
设flex-shrink: 0确实能阻止收缩，但副作用明显：当父容器太窄时，子项会溢出（overflow: visible默认），且可能触发横向滚动条或遮挡其他元素。
- 仅适用于“绝对不可压缩”的关键控件，如操作按钮、固定宽度图标
- 若多个子项都设
flex-shrink: 0，又没配flex-wrap: wrap，整行会强行撑宽容器 - 更稳妥的组合是：
flex-shrink: 1; min-width: 0;→ 允许收缩但有底线；或flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;→ 压缩时优雅截断
检查flex-basis是否隐式设成了auto
当没显式写flex-basis时，浏览器按flex-basis: auto处理，即取子元素内容自然宽——这在响应式场景下极不稳定，尤其遇到中英文混排、动态文本时。
立即学习“前端免费学习笔记（深入）”；
- 推荐显式声明：
flex: 0 1 200px（等价于flex-grow: 0; flex-shrink: 1; flex-basis: 200px） - 若需弹性分配剩余空间，用
flex: 1 1 200px，比单纯flex: 1更可控 - 注意：
flex-basis: 0+flex-grow: 1会忽略内容宽度，强制均分，容易造成文字挤成一团，慎用于含文本的项
真正卡住的问题往往不在flex本身，而在没给内容一个“不容再小”的物理边界。盯住min-width和flex-basis两个点，比反复调flex-shrink更治本。
