Flexbox not filling height in IE11

Question

I have this case:

http://codepen.io/anon/pen/radoPd?editors=110

This is the CSS Code:

.wrapper{   background-color: red;   min-height: 100vh;   display: flex; }  .sidebar{   background: orange;   flex: 0 0 300px; } .main{   background-color: green;   overflow-y: scroll; } 

For some reason, on IE11, neither the .sidebar nor the .main area will fill the whole height of the wrapper.

This is inconsistency between browsers. Is this a bug? Am I missing something?

Answer 1

This a known IE bug that unfortunately has been closed as Won't Fix by IE Team and described as follows:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

AFAIK and despite this description, the bug also applies when flex-direction is row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.

As a workaround I propose to set a min-height: 100vh to the main element too:

.wrapper{   background-color: red;   min-height: 100vh;   display: flex; }  .sidebar{   background: orange;   flex: 0 0 300px; } .main{   background-color: green;   min-height: 100vh; } 

Pen here.