11

As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.

I have a container div and 2 child divs.

The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.

I want the first child to be all the way at the top and the second child to be all the way at the bottom.

This works in Chrome and Firefox but not in IE, and I have no idea why.

Any comments and feedback are welcome.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Timon
  • 1,003
  • 1
  • 9
  • 38
  • I've added a background color for the container. ( yellow ). You can see on the jsFiddle that the container is 400px in IE. – Timon Nov 08 '16 at 15:48
  • as @GCyrillus said `min-height` in IE with flex and `flex-direction: column` don't works properly, use `height` instead –  Nov 08 '16 at 15:53

3 Answers3

31

IE 10 & 11 have a number of issues with rendering flexbox properly.

Here's one: A flex container doesn't respect the min-height property in these browsers.

A simple solution is to make your flex container also a flex item.

Just add this to your code (no other changes necessary):

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

More info: https://github.com/philipwalton/flexbugs#flexbug-3

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • thanks for the solutions. Even the min-height property is outside the bugged flex container, this solution works as soon as you add this to the element with the min-height – ggzone Mar 08 '18 at 13:57
5

According to this bug IE11 doesn't render the items correctly when using min-height in flexbox.

It seems like the problem was solved in Edge, but IE10-11 will not work.

Dekel
  • 60,707
  • 10
  • 101
  • 129
3

This is a bug in IE10/11. You can find the information at https://github.com/philipwalton/flexbugs#flexbug-3

To fix this bug in IE10/11, add a wrapper element around the flex container that is itself a flex container. In your example, you can add display flex to body tag. And add width 100% style in the container div

Cao Phan Thanh
  • 81
  • 1
  • 4