IE11 - Flex child takes full height

Question

I have a problem with Flexbox on IE11.

What I'm trying to do is to have one parent with 3 children. One header with a fixed size, a footer with a fixed size and in between a content area which should take the remaining space.

Here's the code - it works with Chrome but not with IE11:

.parent {
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.header {
  flex: 0 0 auto;
  background: red;
  height: 50px;
}

.content {
  background: yellow;
  flex: 1 1 auto;
  position: relative;
  overflow-y: scroll;
}

.footer {
  flex: 0 0 auto;
  background: blue;
  height: 50px;
}

.long-item {
  height: 2000px;
}

<div class="parent">
  <div class="header">Header</div>
  <div class="content">
    <div class="long-item">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

I already went throught the open issues but couldn't really find a solution.

Answer 1

That is one of IE's flex bugs, the min-height when using flex direction column "bug".

In your case, add display: flex to the body and flex-grow: 1; to the parent (flex-basis: 100% or width: 100% will work as well).

body {
  display: flex;
}

.parent {
  flex-grow: 1;           /*  fill horizontal space */
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.header {
  flex: 0 0 auto;
  background: red;
  height: 50px;
}

.content {
  background: yellow;
  flex: 1 1 auto;
  position: relative;
  overflow-y: scroll;
}

.footer {
  flex: 0 0 auto;
  background: blue;
  height: 50px;
}

.long-item {
  height: 2000px;
}

<div class="parent">
  <div class="header">Header</div>
  <div class="content">
    <div class="long-item">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>