Scale SVG along other content with CSS flexbox - html

Question

I want to display a rectangular SVG between two vertically aligned DIVs, so that the SVG takes up as much space as possible (but keeps its aspect ratio). As the SVG itself is dynamically generated, I have to use the <svg> HTML tag to include it (and i.e. can't use an <img> tag).
So I tried to use flexbox, but the SVG doesn't stick to the rules and gets too large:
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>
If I replaced the SVG with some other content the example works as expected.
Do you have any idea how I can realize this without any JS involved?

Answer 1

You need to add width:100%;height:100% to the SVG and min-height:0 to the parent 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>