使用 CSS flexbox 沿其他内容缩放 SVG

Question

我想在两个垂直对齐的 DIV 之间显示一个矩形 SVG，以便 SVG 占用尽可能多的空间（但保持其纵横比）。由于 SVG 本身是动态生成的，我必须使用 <svg> HTML 标签来包含它（即不能使用 <img> 标签）。

所以我尝试使用 flexbox，但是 SVG 不遵守规则并且变得太大：

html, body, .parent {
  height: 100%;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
}

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

如果我将 SVG 替换为其他内容，该示例将按预期工作。

你知道我如何在不涉及任何 JS 的情况下实现这一点吗？

Answer 1

您需要将width:100%;height:100% 添加到SVG 并将min-height:0 添加到父to allow the shrink effect

html, body, .parent {
  height: 100%;
  margin:0;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
  min-height:0;
}
svg {
  width:100%;
  height:100%;
}

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