为什么CSS3中flex布局会导致子级svg图标无法缩小？
flex布局下svg图标不缩小，是因为svg的默认样式包含`min-width: auto`和`min-height: auto`，这会让浏览器在计算最小尺寸时优先尊重svg内部的固有宽高，从而忽略父容器分配的更小空间。要解决这个问题，只需给svg元素添加`max-width: 100%`或显式设置`width`和`height`即可。
<div style="max-width:90%">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100" height="100" fill="blue" />
</svg>
</div>上述代码中，父容器宽度为50px，但内部SVG宽100px。由于SVG默认的`min-width`属性，它不会收缩到50px，而是保持100px，导致溢出。若添加`style="max-width: 100%; max-height: 100%;"`到SVG标签，它将正确缩放到50x50px。
如何验证并修复该问题？
通过对比带与不带`max-width`属性的SVG表现，可以确认修复效果。核心在于覆盖SVG的默认最小尺寸行为。
立即学习“前端免费学习笔记（深入）”；
<!-- 修复前 --> <div style="display: flex; width: 50px;"> <svg width="100" height="100"><rect width="100" height="100" fill="red"/></svg> </div> <!-- 修复后 --> <div style="display: flex; width: 50px;"> <svg width="100" height="100" style="max-width: 100%; max-height: 100%;"><rect width="100" height="100" fill="green"/></svg> </div>
第一段输出：红色方块宽度100px，超出父容器。第二段输出：绿色方块宽度50px，完美适配。这表明`max-width: 100%`有效抑制了SVG的固有尺寸扩张。
当SVG使用viewBox属性时，是否还需要额外设置？
即使使用了`viewBox`，只要未显式设置`width`/`height`或`max-width`，SVG仍可能因默认`min-width`而不收缩。建议在所有响应式场景中统一为SVG添加`max-width: 100%; height: auto;`以确保兼容性。
