Flexbox not filling height in IE11

css, flexbox, internet-explorer-11

Solution

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.

Problem

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?

Original source

Related problems