SVG изнутри flex смещен, когда обернут в div

Question

Я хочу, чтобы значок SVG с неизвестным размером центрировался по левому краю текста.Я предпочтительно хочу использовать flex.

Это CSS для SVG и текстового контейнера:

.container {
    background-color: pink;
    display: flex;
    align-items: center;
    margin: 10px;
    width: 200px;
}

---

Это прекрасно работает:

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect width="24" height="24"/>
  </svg>
  <div>ALIGNED ICON</div>
</div>

ОднакоКогда я оборачиваю SVG в другой div, высота этого div становится излишне большой, что приводит к смещению SVG и текста:

<div class="container">
    <div>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <rect width="24" height="24"/>
        </svg>
    </div>
    <div>MISALIGNED ICON</div>
</div>

Вот ссылка на CodePen

---

На самом деле, это проект React, и я использую внешние компоненты SVG, которые я не контролирую или не знаю размера.Поэтому я не могу применить какие-либо стили непосредственно к элементу SVG, ни установить высоту оболочки div в соответствии с SVG.

Как выровнять SVG и текст при переносе SVG веще один div?

Answer 1

Просто добавьте flex и выровняйте по этому классу div.

https://codepen.io/anon/pen/zeeegz

html

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect width="24" height="24"/>
  </svg>
  <div>ALIGNED SVG</div>
</div>
<div class="container">
  <div class="item">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <rect width="24" height="24"/>
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>

css

 .container {
      background-color: pink;
      display: flex;
      align-items: center;
      margin: 10px;
      width: 200px;
    }
    .item{
      display: flex;

    }

Answer 2

Внутренний div также должен отображаться как flex

.container {
  background-color: pink;
  display: flex;
  align-items: center;
  margin: 10px;
  width: 200px; 
}

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect width="24" height="24"/>
  </svg>
  <div>ALIGNED SVG</div>
</div>
<div class="container">
  <div style="display: flex;">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <rect width="24" height="24"/>
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>