Image in flexbox column not rendering properly in Chrome

Question

I have a div with one image and one paragraph in it.

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

I use flex-box and flex-direction: column to align them.

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

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

p {
  flex-basis: 50%;
}

Since both img and p have flex-basis 50% I would expect each of them to take up 50% of the space. In Firefox it works, but in Chrome the image is bigger (in height) than the container itself.

I have made a jsfiddle to demonstrate this: https://jsfiddle.net/q2esvro9/1/

How can I get the behaviour from Firefox in Chrome?

(Another interesting fact: In Internet Explorer 11 the image and text take up the same space, but the image is stretched in width. Which means 3 different behaviours for a very short and simple CSS code)

#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>

Not sure about why the browsers have different things going on here, but you could just add `max-height: 50%` for the img css I suppose — abney317, Dec 31 '18 at 15:52
Not entirely a duplicate in my opinion because the solution here is a 2-step process. The duplicate covers only one. — Michael Benjamin, Dec 31 '18 at 16:14

Michael Benjamin · Accepted Answer · 2018-12-31T16:02:04.597

There are flexbox rendering variations between the major browsers.

When dealing with images, the number of variations grows.

What I've found to work consistently across browsers is to not use img elements in a flex formatting context (i.e., don't make them flex items).

Instead, wrap an img in a div element, making the div the flex item and keeping the image in a block formatting context.

#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>

Notes:

Image in flexbox column not rendering properly in Chrome

1 Answers1

Linked