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.