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

I see all the minimum height: Stack Overflow and 100% solution on the Web and I do not think

< Ol>

I have a two column container, and both columns should stand for the same height.

When the content does not fill the screen, the columns are spread to the entire window height.

I'm happy to use Flex Box, but I would not like to use JS hacks if possible.

Example Code:

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Body & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "nav" & gt; & Lt; P & gt; Item 1 & lt; / P & gt; & Lt; P & gt; Item 2 & lt; / P & gt; & Lt; P & gt; Item 3 & lt; / P & gt; & Lt; P & gt; Item 4 & lt; / P & gt; & Lt; P & gt; Item 5 & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "content" & gt; & Lt; P & gt; Content 1 & lt; / P & gt; & Lt; P & gt; Content 2 & lt; / P & gt; & Lt; P & gt; Content 3 & lt; / P & gt; & Lt; P & gt; Content 4 & lt; / P & gt; & Lt; P & gt; Content 5 & lt; / P & gt; & Lt; P & gt; Content 6 & lt; / P & gt; & Lt; P & gt; Content 7 & lt; / P & gt; & Lt; P & gt; Content 8 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; Html, body {height: 100%; Margin: 0; }. Wiper {height: 100%; Overflow: Auto; -Widk-overflow-scrolling: touch; }. Container {Display: Flex; Alignment: Stretch; Minimum height: 100%; } .nav {background: gray; Width: 200px; } .content {flex-grow: 1; Background: yellow; }  

It works perfectly in Safari and Chrome.

It seems like IE (v11 in my case) does not respect my minimum height and thus the columns do not fill the height of the screen. The I-6 + 7 was in height, with treatment as the height, but it is a remnant of past and has gone while using an HTML5 ideology.

How can I respect my migraine -High?

How do I work out this layout?

decide:

HTML

 < Code> & lt; Body & gt; & Lt; Header & gt; Header & lt; / Header & gt; & Lt; Main & gt; Here comes the stuff ... & lt; / Main & gt; & Lt; Footer & gt; Footer & lt; / Footer & gt; & Lt; / Body & gt;  

css

  body {display: flex; Flex-direction: column; Height: 100 VH; } Header, footer {Flex-shrink: 0; } Main {Flex: 1 Auto; }  

jsfiddle: