Flexbox doesn't fill 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, in IE11, neither the .sidebar nor the .main area will fill the entire height of the wrapper.

This is an inconsistency between browsers. This is mistake? Did I miss something?

Answer 1

This is a known Won't Fix error by the IE command and is described as follows:

In all other browsers that support flexbox, a flex-direction:column based flexible container will evaluate min-height containers to calculate flex-grow lengths. In IE10 and 11-preview, it only works with an explicit height value.

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

As a workaround, I suggest also setting the min-height: 100vh element to the main element:

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

The pen is here .