Q:

Internet Explorer stretches image in flexbox

I want to create full height section with 2 sections.
In the first one is just text and in the second one a image.
I'm using flexbox for this and it works fine in Chrome, FF, Edge but not in IE.

#super {
  height: 100vh;
}

#super #el-1 {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#super #el-1 .above,
#super #el-1 .below {
  display: flex;
  flex-flow: column;
  align-items: center;
}

#super #el-1 .above {
  text-align: center;
  padding: 100px 0;
}

#super #el-1 .below img {
  width: 60%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
<div id="super">

  <div id="el-1">

    <div class="above">
      <h1>Some crazy text here!!!</h1>
      <h2>Wow a second line - amazing :o</h2>
    </div>

    <div class="below">
      <img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg">
    </div>

  </div>

</div>

https://jsfiddle.net/0cw3epzv/

A:

IE is notorious for having many flexbugs. It's reliable for very simple flex layouts. But with even the slightest bit of complexity, IE requires "special attention" (i.e., ugly hacks).
In this particular case, it appears IE requires a height limitation on the parent of the image:
Instead of this:
.below { }

img {
    width: 60%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

Try this:
.below {
    flex: 0 0 200px; /* flex-basis: 200px (demo value only) */
}

img {
    height: 100%;
    /* flex: 0 0 100%;  <--- this should work also, but it doesn't */
}

revised fiddle

