[html] Flexbox not working in Internet Explorer 11

This piece of code works fine in Firefox, Chrome and Edge, but it does not work properly in IE11 because of flex model, apparently. How can I fix it?

This is how it looks in Firefox

This is how it looks in IE11

body * {_x000D_
  box-sizing: border-box;_x000D_
}_x000D_
html {_x000D_
  height: 100%;_x000D_
}_x000D_
body {_x000D_
  min-height: 100%;_x000D_
  display: flex;_x000D_
  flex-flow: column;_x000D_
  margin: 0;_x000D_
}_x000D_
main {_x000D_
  flex: 1;_x000D_
  display: flex;_x000D_
}_x000D_
header,_x000D_
footer {_x000D_
  background: #7092BF;_x000D_
  border: solid;_x000D_
  width: 100%;_x000D_
}_x000D_
section {_x000D_
  border: solid;_x000D_
  background: #9AD9EA;_x000D_
  flex: 1_x000D_
}_x000D_
aside {_x000D_
  border: solid;_x000D_
  width: 150px;_x000D_
  background: #3E48CC_x000D_
}

<header>_x000D_
  <p>header_x000D_
</header>_x000D_
<main>_x000D_
  <aside>_x000D_
    <p>aside_x000D_
    <p>aside_x000D_
  </aside>_x000D_
  <section>_x000D_
    <p>content_x000D_
    <p>content_x000D_
    <p>content_x000D_
    <p>content_x000D_
  </section>_x000D_
</main>_x000D_
<footer>_x000D_
  <p>footer_x000D_
  <p>footer_x000D_
</footer>

See "Can I Use" for the full list of IE11 Flexbox bugs and more

There are numerous Flexbox bugs in IE11 and other browsers - see flexbox on Can I Use -> Known Issues, where the following are listed under IE11:

• IE 11 requires a unit to be added to the third argument, the flex-basis property
• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property
• IE 11 does not vertically align items correctly when min-height is used

Also see Philip Walton's Flexbugs list of issues and workarounds.

I have tested a full layout using flexbox it contains header, footer, main body with left, center and right panels and the panels can contain menu items or footer and headers that should scroll. Pretty complex

IE11 and even IE EDGE have some problems displaying the flex content but it can be overcome. I have tested it in most browsers and it seems to work.

Some fixed i have applies are IE11 height bug, Adding height:100vh and min-height:100% to the html/body. this also helps to not have to set height on container in the dom. Also make the body/html a flex container. Otherwise IE11 will compress the view.

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

A fix for IE EDGE that overflows the flex container: overflow:hidden on main flex container. if you remove the overflow, IE EDGE wil push the content out of the viewport instead of containing it inside the flex main container.

main{
    flex:1 1 auto;
    overflow:hidden; /* IE EDGE overflow fix */  
}

You can see my testing and example on my codepen page. I remarked the important css parts with the fixes i have applied and hope someone finds it useful.