flex container min-height ignored in IE

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

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

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.