Изображение в столбце flexbox неправильно отображается в Chrome

Question

У меня есть div с одним изображением и одним абзацем.

<div id="container">
  <img src="..." />
  <p>
    This is my text
  </p>
</div>

Я использую flex-box и flex-direction: column для их выравнивания.

#container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 400px;
}

img {
  max-width: 80%;
  flex-basis: 50%;
}

p {
  flex-basis: 50%;
}

Поскольку оба img и p имеют flex-basis 50% Я ожидаю, что каждый из них займет 50% пространства.В Firefox это работает, но в Chrome изображение больше (по высоте), чем сам контейнер.

Я сделал jsfiddle, чтобы продемонстрировать это: https://jsfiddle.net/q2esvro9/1/

Как я могу получитьповедение из Firefox в Chrome?

(Еще один интересный факт: в Internet Explorer 11 изображение и текст занимают одинаковое пространство, но изображение растягивается по ширине. Что означает 3 различных поведения для оченькороткий и простой код CSS)

#container {
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  flex-direction: column;
  border: solid 2px red;
  height: 300px;
  width: 400px;
}

img {
  max-width: 80%;
  flex-basis: 50%;
}

p {
  flex-basis: 50%;
  border: solid 2px green;
}

<div id="container">
  <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" />
  <p>
    This is my text
  </p>
</div>

Answer 1

Существуют вариации рендеринга flexbox между основными браузерами.

При работе с изображениями число вариаций увеличивается.

То, что я обнаружил для согласованной работы во всех браузерах, составляет не использовать img элементы в контексте flex-форматирования (т. е. не делать их элементами flex).

Вместо этого, оберните img в элемент div, сделав div гибким элементом и сохранив изображение в контексте форматирования блока .

#container {
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  flex-direction: column;
  border: solid 2px red;
  height: 300px;
  width: 400px;
}

#container > div {
  flex: 0 0 50%;  /* 1 */
  min-height: 0;  /* 2 */
}

img {
  height: 100%;
}

p {
  flex-basis: 50%;
  border: solid 2px green;
}

<div id="container">
  <div>
    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" />
  </div>
  <p>
    This is my text
  </p>
</div>

Примечания:

1. Значение и преимущества flex: 1
2. Почему гибкие элементы не уменьшаются в размерах контента?