CODEWITHSUNDEEP
cssgoogle-chromefirefoxflexbox
Preli
Preli

Reputation: 3041

Image in flexbox column not rendering properly in Chrome

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>

Upvotes: 2

Views: 364

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372139

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:

  1. The meaning and benefits of flex: 1
  2. Why don't flex items shrink past content size?

Upvotes: 1

Related Questions