Internet Explorer doesn't expand a flexbox wit

Question

I'm trying to create a container with a static header and a body that expands based on its contents up to a maximum height. After the maximum height is reached, the body should scroll. I've written code that works great in Chrome/Firefox, but in IE, the container doesn't expand correctly.

div{
  border: 1px solid #DDD;
}

.container{
  max-height: 150px;
  display: flex;
  flex-direction: column;
}

.header{
  height: 40px;
}

.scroll{
  flex: 1;
  overflow: auto;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

If I use flex-direction: row; instead, the height expands appropriately, but obviously my header doesn't look right then.

Is there a workaround to get a growing container with a header and scrolling body to work with IE11 and Edge? I'm not opposed to abandoning flexbox if necessary.

Answer 1

It appears this code works as intended in Chrome, Firefox and Edge. The problem appears to be IE11.

Here's one solution that appears to work on all four browsers:

• Make the body element a flex container.
• Make one adjustment to the original code (add width: 100%).

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  margin: 0;
}
.container {
  max-height: 150px;
  display: flex;
  flex-direction: column;
  width: 100%;  /* adjustment */
}
.header {
  height: 40px;
}
.scroll {
  flex: 1;
  overflow: auto;
}
div {
  border: 1px solid #DDD;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

jsFiddle

Answer 2

The fix from @Michael_B did not really work for me because my container must not get a fixed/relative height. Also the tip to make the height: 0 was not working on smaller screens.

The solution: Adding a flexbox wrapper around container

Adding a wrapper around your container will make it magically work:

<div class="container-wrapper">
  <div class="container">
    <div class="header">header</div>
    <div class="scroll">...</div>
  </div>
</div>

And then styling:

.container-wrapper {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.scroll {
  flex-grow: 1;
}