Image Height In Flexbox Not Working In Ie

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 I

Solution 1:

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; */
}

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

Solution 2:

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