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?

I don't have access to IE11 at the moment, so I can only guess. Have you tried explicitly setting `align-items: stretch` on `.wrapper`? Does it react to other values, such as `center` or `flex-end`? — janfoeh, Feb 20 '15 at 13:04
I tried and that didnt work :( It works with others. I suspect that stretch conflicts somehow with `100vh` — Enrique Moreno Tent, Feb 20 '15 at 13:07
I don't think that's likely, since `min-height` works on `.wrapper`, while the `align-items` property has an effect on the flex-children, not on the flex-container itself. — janfoeh, Feb 20 '15 at 13:09
Pretty much a duplicate of: http://stackoverflow.com/questions/25177791/ie11-flexbox-and-vh-height-units-not-compatible — Adrift, Feb 20 '15 at 15:08
The problem seems to be relative to [here](https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): once you set the `min-height` for your wrapper, all children heights are calculated wrong. Solution that worked for me: set `height: 100%`. Unfortunately it may break break FF & Chrome, so you need to apply this CSS from JS conditionally: `isIE11() && $('.wrapper').css('height', '100%');`. But it seem that you have a bit different problem... — dma_k, Jun 09 '16 at 10:47

score 31 · Accepted Answer · answered Aug 23 '17 at 12:15

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.

Is there a generic solution when the wrapper is not `100vh`? I have a "table" made of divs, and simply want each column cell in a row to be the same height. So I have `display:flex` on the `row` div, and this creates desired behavior in Chrome, but in IE if one cell has lots of content, and an adjacent cell has little content, the cell with little content does not stretch vertically to be the same height as the cell with lots of content. — user1063287, Mar 19 '18 at 04:12

Flexbox not filling height in IE11

1 Answers1