Internet Explorer doesn't honor my min-height: 100% with flexbox

Question

I\'ve been looking through all the min-height: 100% solutions on StackOverflow and the web and I can\'t seem to find one that fits my (relatively simple) needs.

Here\'s

Answer 1

min-height is not working in IE10/11 when it's associated with a flex layout (check the bug report). Use another flex container to fix it.

Edit: Just figured out I wasn't answering the original post, misled by the upvoted answer. So here we go:

---

Two columns layout

HTML

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

Don't use flexbox layout directly on body cause it screwed up elements inserted via jQuery plugins (autocomplete, popup, etc.).

Here the fixed layout based on your code.

---

Sticky footer

HTML

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

See a working demo.