如何用CSS Flexbox实现SVG与其他内容适配缩放？

我懂你遇到的这个坑——SVG作为内联元素，自带默认尺寸规则，哪怕父容器加了flex-grow:1，它也不会乖乖遵守容器空间限制还保持比例。不用JS的话，咱们靠几个CSS调整就能搞定：

核心思路 #

给SVG的父容器加上空间约束，同时让SVG本身能根据容器空间自动缩放，严格遵循viewBox定义的宽高比。

修改后的完整代码 #

CSS 部分

html, body, .parent { 
  height: 100%; 
  margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
}
.parent { 
  display: flex; 
  flex-flow: column nowrap;
}
.contentSVG { 
  flex-grow: 1; 
  display: flex; /* 让SVG能在容器内灵活适配 */
  align-items: center; /* 垂直居中SVG（可选，按需调整） */
  justify-content: center; /* 水平居中SVG（可选，按需调整） */
  min-height: 0; /* 关键！Flex子项默认不会缩小到内容尺寸以下，这个属性打破限制 */
  padding: 0; /* 清除默认内边距 */
}
.contentSVG svg {
  max-width: 100%; /* 不超出容器宽度 */
  max-height: 100%; /* 不超出容器高度 */
  width: auto; /* 让宽度随高度自动适配，保持比例 */
  height: auto; /* 让高度随宽度自动适配，保持比例 */
}

HTML 部分（结构不变，保留原SVG的viewBox）

<div class="parent">
  <div class="contentA"> content A </div>
  <div class="contentSVG">
    <svg viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5" fill="red" />
    </svg>
  </div>
  <div class="contentB"> content B </div>
</div>

关键细节说明 #

• min-height: 0：这是Flexbox的常见陷阱——垂直方向的Flex子项默认不会缩小到自身内容的最小高度以下，加上这个属性才能让.contentSVG真正占据剩余空间，哪怕SVG默认尺寸比容器大。
• SVG的尺寸设置：max-width和max-height确保SVG不会超出容器范围，width:auto和height:auto则让它根据viewBox的比例自动缩放，完全不会变形。
• 父容器的Flex设置：把.contentSVG设为Flex容器并添加居中属性是可选操作，能让SVG在可用空间里居中显示，视觉效果更舒服，不需要的话可以直接去掉align-items和justify-content。

这样调整后，SVG就会老老实实待在中间容器里，尽可能占满可用空间，同时严格遵守宽高比，全程不用JS~

内容的提问来源于stack exchange，提问作者muffel