Search code examples
cssgoogle-chromeflexboxresponsive-images

Image height inside flexbox not working in Chrome

I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.

<div id="flex-container">
    <div id="container1"></div>
    <img src="#" alt="">
    <div id="container2"></div>
</div>

#container1 and #container2 have their own height, and the img should use the remaining height inside #flex-container.

This snippet works on Firefox, but doesn't work in Chrome. (jsfiddle)

#flex-container{
  height: 300px;
  width: 500px;
  display: flex;
  display: -webkit-flex;
  flex-flow: column nowrap;
  -webkit-flex-flow: column nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 5px solid black;
}

#container1, #container2{
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

Chrome needs -webkit- prefixes for flexbox, but the issue doesn't seem to be this.

What can be happening? Is a browser bug or I'm forgetting something?

Solution

  • There are two problems you need to overcome:

    Firefox solves them both on its own, but Chrome needs assistance.

    Problem #1

    The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.

    Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).

    #flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
    <div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

    A complete explanation of this issue can be found here:

    Problem #2

    Then you hit the second problem: keeping the aspect ratio. This is a common problem in flex containers. One option is to define a height for the image:

    #flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
    <div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>