SVG在flex容器中不缩放的根本原因是viewBox缺失、width/height属性残留或未包裹wrapper；必须用div wrapper设置flex-shrink:0和min-width:0，显式声明viewBox与preserveAspectRatio，并删除svg内联宽高属性。
SVG 在 flex 容器里不缩放，不是 CSS 写错了，而是它被浏览器当作了“有固定尺寸的图片”来处理——viewBox 缺失、width/height 属性残留、或没包 wrapper，都会让缩放逻辑彻底失效。
flex-shrink: 0 必须加在 wrapper 上，不是 <svg> 自身
SVG 是替换元素（replaced element），flex-shrink 只对 flex 容器的**直接子元素**生效。给 <svg> 加 flex-shrink: 0 完全无效。
- 把
<svg>包一层<div class="icon-wrapper">，然后给这个 wrapper 加flex-shrink: 0和min-width: 0 - 若用
<img src="icon.svg">，同样要包 wrapper ——<img>也是替换元素，逻辑一致 - 别给 wrapper 设固定
width/height，会破坏响应性；优先用max-width: 100%+flex-shrink: 0
viewBox 缺失或值错误，缩放就失去坐标基准
没有 viewBox，SVG 就不是真正可缩放的矢量图形，而是被当作位图硬渲染。即使写了 width: 100%，也只是拉伸像素，不是重绘路径。
- 必须显式声明，如
viewBox="0 0 24 24"，且数值要和原始设计稿画布尺寸严格一致 - 删掉
<svg>标签上的width和height属性（包括width="100%"、height="auto"） - 内联 SVG 才能响应式缩放；用
<img>引用时，viewBox在文件头里也不起作用
Safari 和 IE11 的 max-width / width 行为差异
iOS Safari（15.4 之前）在 flex 容器中可能忽略 max-width: 100%，导致内联 SVG 卡在原始尺寸；IE11 则完全不认 align-items: center，静默降级为 flex-start。
立即学习“前端免费学习笔记（深入）”；
- 对 Safari：给 wrapper 加
min-width: 0，强制参与 flex 计算 - 更稳方案：用
width: 100%替代max-width，并确保父级有明确宽度（如flex-basis或width） - 对 IE11：父容器必须同时写
display: -ms-flexbox和-ms-flex-align: center
preserveAspectRatio 不声明，缩放行为就不可控
没写 preserveAspectRatio，浏览器按默认值处理，但 Safari 和 IE11 解析不一致：一个可能用 meet（等比留白），另一个可能退化成 slice（裁切）。
- 需要等比缩放填满容器：加
preserveAspectRatio="xMidYMid meet" - 需要非等比拉伸贴满（比如 banner 背景）：加
preserveAspectRatio="none" - 用
<img>引用 SVG 时，preserveAspectRatio在源文件里才有效；内联 SVG 必须写在根<svg>标签上
最常被忽略的是：flex 布局下 SVG 的尺寸控制其实是两层问题——外层是 flex 项目是否收缩（靠 wrapper 的 flex-shrink 和 min-width），内层是 SVG 自身是否具备可缩放结构（靠 viewBox + 无宽高属性 + 显式 preserveAspectRatio）。漏掉任何一层，图标就卡死不动。
