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

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

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

回答2:

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

来源：https://stackoverflow.com/questions/38431915/image-height-in-flexbox-not-working-in-ie

标签

html

css

css3

cross-browser

flexbox