Image height in flexbox not working in IE

Question

I have a flex "row" that contains 5 flex "cells" that contains an image which is supposed to be aligned in the middle.

It works perfectly in Chrome and Firefox, but it doesn't in IE. It doesn't get the good ratio. In other terms, height:auto doesn't work in IE when the image is in a flexbox.

I already tried several things like flex:none; for the image or wrap the image in another div. Nothing works.

I want it with the good ratio and fully centered:

Here is a jsFiddle: https://jsfiddle.net/z8op323f/5/

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
}
img {
  width: 60%;
  margin: auto;
  height: auto !important;
  min-height: 1px;
}
.long {
  width: 80%;
  height: auto !important;
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 12:01

height: auto simply means the height of the content. It's a default value; you don't need to specify it.

If you remove height: auto from your code, it doesn't change anything (in any browser).

From the spec: 10.5 Content height: the height property

The problem appears to be that margin: auto is respected in Chrome and FF. But it is being (mostly) ignored in IE 11/Edge.

This is probably a bug. IE11 in particular is known to have many flexbugs:

https://github.com/philipwalton/flexbugs
http://caniuse.com/#search=flexbox (see "Known issues" tab)

A simple cross-browser solution would be to use a margin: auto equivalent:

Instead of this code on the flex item:

img {
    margin: auto;
}

Use this on the flex container:

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

For more details see box #56 here: https://stackoverflow.com/a/33856609/3597276

Revised Fiddle

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
  justify-content: center;    /* NEW */
  align-items: center;        /* NEW */
}
img {
  width: 60%;
  /* margin: auto; */
  /* height: auto !important; */
  min-height: 1px;
}
.long {
  width: 80%;
  /* height: auto !important; */
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

score -1 · Answer 2 · answered Jul 18 '16 at 08:40

-1

try adding display: -ms-flexbox; for IE 10

answered Jul 18 '16 at 08:40

nitzanerman

104
1
6

where you wrote the `display: flex;` check this out https://css-tricks.com/using-flexbox/ it may help – nitzanerman Jul 18 '16 at 08:54
read the question.. it's a browser compatibility problem, display flex is recognized by ie that's not the problem. Try to solve the jsfiddle before answering please. But thanks ! – Baptiste Arnaud Jul 18 '16 at 08:57

Image height in flexbox not working in IE

2 Answers2

Linked