Have you noticed the peculiar behavior of display flex? Sometimes it takes into account the line-height of an element, causing the height to be dependent on it. Other times, it disregards the line-height and sets the minimum size based on the content inside.
Consider this example where the defined styles ignore the line-height - the height of the element will match the size of the SVG:
<div style="display:flex; line-height: 5">
<div style="display: inline-flex; line-height: 10">
<svg>...</svg>
</div>
</div>
If we remove the display:flex style from the outer div, the size of the element will align with a line-height of 5:
<div style="line-height: 5">
<div style="display: inline-flex; line-height: 10">
<svg>...</svg>
</div>
</div>
Similarly, removing the display:inline-flex style from the inner div will result in the size matching a line-height of 10:
<div style="line-height: 5">
<div style="line-height: 10">
<svg>...</svg>
</div>
</div>
The question remains: why does it work this way? It seems to operate as expected with text, consistently applying the line-height for text elements.
svg {
width: 1rem;
height: 1rem;
}
.block {
display: flex;
border: solid 1px;
line-height: 10;
}
.inline {
display: inline-flex;
line-height: 5;
} <div class="block">
<span class="inline">
<svg viewBox="0 0 24 24" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M11 7h2v2h-2zm0 4h2v6h-2z">
</path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z">
</path>
</svg>
</span>
</div>
<div class="block">
<span class="inline">
------
</span>
</div>