Internet Explorer doesn't expand a flexbox with flex-direction: column

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.

I only need to support IE11 and Edge, and don't mind abandoning flexbox if there's another way to get growing content with a max-height and a static header. I updated my question, thanks — adamdport, Jul 22 '16 at 14:06
caniuse reports a multitude of bugs in IE11 for flexbox. This is true for all of IE for most things. — Rob, Jul 22 '16 at 14:28

score 5 · Accepted Answer · answered Jul 22 '16 at 14:20

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

...unbelievable. Can you explain a little bit what's happening here? — adamdport, Jul 22 '16 at 14:43
It's just a way of getting around a browser quirk. IE11 doesn't recognize your `max-height` (if you switch it to `height`, it works). By nesting your layout in another flex container, `max-height` is suddenly recognized. IE11 has numerous flexbox issues. See "Known issues" tab here: http://caniuse.com/#feat=flexbox — Michael Benjamin, Jul 22 '16 at 14:49

zarathustra · Answer 2 · 2017-06-07T10:14:33.130

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;
}

Internet Explorer doesn't expand a flexbox with flex-direction: column

2 Answers2

jsFiddle

Linked