Display SVG while only setting parent height-CodePudding

I have an SVG set in a container like so:

<div style="height: 24px;">
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="50%" fill="blue"/>
    <rect x="0" y="50%" width="100%" height="50%" fill="green"/>
  </svg>
</div>

As you can see the SVG ignores the height set by the container. If I only set a width on the container - it's fine...

The container must only have a height set as the SVG can have a variable width. With display: flex it seems to work, but with other display types it doesn't - so I'm trying to understand why the different display properties work.

CodePudding user response：

This CSS will make the SVG respect the container's height:

svg {
    height: 100%;
    width: auto;
}