Internet Explorer在flexbox中拉伸图像

Question

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/

Answer 1

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" (ie, 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

Answer 2

To avoid that for browser compatibility you can try this option. What i did was to remove flex from the ".below" class and centered the img element in it. Hope it helps

#super {

  height: 100vh;

  #el-1 {

    display: flex;
    flex-flow: column;
    height: 100%;

    .above {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .below {
      text-align: center;
    }

    .above {
      text-align: center;
      padding: 100px 0;
    }

    .below {

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

    }

  }

}