使用 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到父級以允許收縮效果

 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>