How can I ensure that an inline SVG occupies all available space within a row without specifying its height across different screen sizes?
The solution involves setting the SVG to have 100% height with a viewBox, allowing it to adjust accordingly while maintaining its aspect ratio.
Below is some code along with a link to a non-functional pen (where the SVG fails to take up remaining space in the row):
<div class='row'>
<div class='text'>
<h2>Lorem Ipsum</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<svg height='100%'>
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
Sorry, your browser does not support inline SVG.
</svg>
</div>
.row {
display: flex;
width: 100%;
align-items: stretch;
}
.row .text {
flex-shrink: 0;
flex-basis: 20rem;
}
.row svg {
flex-grow: 1;
}