flex-shrink为0仍被压缩的主因是父容器未设min-width/min-height，导致浏览器回退至min-width: auto并重算尺寸；应配合min-width: 0（row）或min-height: 0（column）使用。
flex-shrink 为 0 却还是被压缩？检查父容器是否设了 min-width: auto
默认情况下，flex-shrink 为 1 的子项在空间不足时会收缩；设成 0 理论上应“不缩”，但很多人发现图标或固定宽高元素依然被压扁——根本原因常是父容器（比如 flex 容器本身）没显式设置 min-width 或 min-height，导致浏览器按规范回退到 min-width: auto，进而触发内部尺寸再计算，绕过了 flex-shrink: 0 的约束。
- 对图标类元素，直接加
min-width: 0或min-height: 0（取决于布局方向）比只设flex-shrink: 0更可靠 - 若父容器是
display: flex且主轴为 row，子项需min-width: 0；若为 column，则需min-height: 0 - 不要依赖
width或flex-basis单独扛住尺寸——它们在 shrink 阶段前就可能被重算
用 flex-shrink: 0 保图标宽度，但文字溢出换行失效？看 white-space 和 overflow
设了 flex-shrink: 0 后图标不缩了，但紧挨着的文字突然不换行、溢出容器——这不是 flex-shrink 的问题，而是它改变了父容器的可用空间计算方式，间接让文字容器失去了“自动换行”的触发条件。
- 文字容器需明确设
white-space: normal（别用nowrap），并配overflow: hidden或text-overflow: ellipsis - 避免给文字容器设
flex-shrink: 0，否则它也会拒绝收缩，和图标一起挤爆父容器 - 更稳妥的做法：把图标和文字包进一个
display: flex的内层容器，图标设flex-shrink: 0，文字设flex: 1，由 flex 自动分配剩余空间
SVG 图标在 flex 容器里被拉伸变形？关键在 width/height 和 preserveAspectRatio
即使设置了 flex-shrink: 0，SVG 仍可能被拉宽变矮——因为 SVG 默认 width 和 height 是 auto，而 flex 布局会强行套用主轴尺寸，忽略其固有宽高比。
- 给 SVG 加
width: 1em或具体像素值（如width: 16px），同时删掉height属性，让浏览器按比例缩放 - 确保 SVG 根元素有
preserveAspectRatio="xMidYMid meet"（多数现代 SVG 工具默认生成，但手动写的容易漏） - 慎用
flex: 0 0 auto替代flex-shrink: 0——它虽等效，但若同时没设flex-basis，某些旧版 Safari 仍可能误判尺寸
移动端 Safari 中 flex-shrink: 0 失效？检查是否触发了 zoom 缩放或 viewport 设置
iOS Safari 在某些 viewport 配置下（尤其是 maximum-scale 或用户双指缩放后），会临时覆盖 flex 计算逻辑，导致 <code>flex-shrink: 0 表现异常，图标被压缩或错位。
立即学习“前端免费学习笔记（深入）”；
- 移除
maximum-scale和user-scalable=no（除非业务强要求禁缩放） - 在 SVG 或图标容器上加
transform: translateZ(0)，可强制触发硬件加速，绕过部分 Safari 渲染 bug - 真机调试时注意：Safari 开发者工具的“responsive”模式不完全模拟真实缩放行为，务必用真机 + Web Inspector 验证
flex-shrink 不是孤立生效的，它和 min-width、SVG 的 intrinsic size、viewport 缩放策略全绑在一起。改一个值之前，先看它周围那三层 CSS 是什么状态。
