flex-shrink: 0 必须加在 SVG 的父容器（wrapper）上，而非 自身，因为 SVG 是替换元素，flex-shrink 仅对 flex 容器的直接子元素生效；需包裹 或 并设 flex-shrink: 0、max-width: 100%。
flex-shrink: 0 必须加在 SVG 的父容器上，不是 <svg></svg> 自身
SVG 是替换元素（replaced element），flex-shrink 不作用于它本身，只对 flex 容器的**直接子元素**生效。常见错误是给 <svg></svg> 直接写 flex-shrink: 0，完全无效。
- 正确做法：把
<svg></svg>包一层<span></span>或<div>，然后给这个 wrapper 加 <code>flex-shrink: 0 - 如果用
<img src="icon.svg" alt="CSS怎样解决Flex布局下SVG图标缩放问题_控制flex-item内的svg尺寸" >，同样要包父容器——<img alt="CSS怎样解决Flex布局下SVG图标缩放问题_控制flex-item内的svg尺寸" >也是替换元素，逻辑一致 - 不推荐给 wrapper 设固定
width/height，会破坏响应性；优先配max-width: 100%+flex-shrink: 0 - 必须显式声明，如
viewBox="0 0 24 24"，且数值要和原始设计稿画布尺寸严格一致 - 删掉
<svg></svg>上的width和height属性（或设为auto），否则浏览器按像素硬渲染，无视viewBox - 内联 SVG 才能真正响应式缩放；
<img alt="CSS怎样解决Flex布局下SVG图标缩放问题_控制flex-item内的svg尺寸" >引用时，viewBox在文件头里也不起作用——浏览器当位图处理 - 临时解法：给 SVG 父容器（即那个加了
flex-shrink: 0的 wrapper）加min-width: 0，强制参与 flex 计算 - 更稳方案：用
width: 100%替代max-width，并确保父级有明确宽度（比如flex-basis或width） - 若需兼容旧版 Safari，可用
transform: scale()做微调，但仅限单图标场景，别用于批量图标库 - 想让 SVG 等比缩放填满容器：靠
viewBox+width: 100%+height: auto - 想让它非等比拉伸贴满（比如 banner 背景）：加
preserveAspectRatio="none"属性，再配合width: 100%+height: 100% - 用
<img alt="CSS怎样解决Flex布局下SVG图标缩放问题_控制flex-item内的svg尺寸" >引用 SVG 时，object-fit才有效，但要注意边缘发虚、无法 CSS 填色等限制
viewBox 缺失或错误会导致 SVG 即使不缩放也变形
加了 flex-shrink: 0 后图标仍被压扁、拉长，大概率是 viewBox 没设或值不对。它不是可选属性，而是 SVG 响应式缩放的底层坐标系统。
移动端 Safari 对无宽高内联 SVG 的 max-width 支持不完整
iOS 15.4 之前，Safari 在 flex 容器中可能忽略 max-width: 100%，导致图标卡在原始尺寸不缩放。这不是 bug，而是它把内联 SVG 当作“无固有宽高的替换元素”，flex 计算时跳过尺寸约束。
object-fit 对 SVG 无效，别混用
object-fit 只适用于替换元素（如 <img alt="CSS怎样解决Flex布局下SVG图标缩放问题_控制flex-item内的svg尺寸" >、<video></video>），对内联 <svg></svg> 完全不起作用。有人试图给 <svg></svg> 加 object-fit: contain，结果毫无反应。
立即学习“前端免费学习笔记（深入）”；
flex-shrink: 0），内层是 SVG 自身是否按预期缩放（靠 viewBox 和 CSS 尺寸策略）。漏掉任一层，都会在窄屏或小容器里突然出问题。
