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.