How display flex affects on line-height of element?

  css, html, javascript

There is a strange behavior of display flex. In some cases it uses line-height of element and height depends on it, and in other cases it can be ignored and min-size of content inside is set.

For example for defined styles line-height will be ignored – height of element will be the same as size of svg

<div style="display:flex; line-height: 5">
  <div style="display: inline-flex; line-height: 10">
    <svg>...</svg>
  </div>
</div>

If for outer div remove style display:flex then size of element will be the same as it’s line-height 5

<div style="line-height: 5">
  <div style="display: inline-flex; line-height: 10">
    <svg>...</svg>
  </div>
</div>

If for inner div remove style display:inline-flex then size of element will be the same as it’s line-height 10

<div style="line-height: 5">
  <div style="line-height: 10">
    <svg>...</svg>
  </div>
</div>

Can someone explain why it’s working this way? It works as expected with text, and always applies line-height for text.

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>

Source: Ask Javascript Questions

LEAVE A COMMENT