Estoy tratando de crear un contenedor con un encabezado estático y un cuerpo que se expanda según su contenido hasta una altura máxima. Después de alcanzar la altura máxima, el cuerpo debe desplazarse. He escrito código que funciona muy bien en Chrome / Firefox, pero en IE, el contenedor no se expande correctamente.

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>

Si yo usoflex-direction: row; en cambio, la altura se expande adecuadamente, pero obviamente mi encabezado no se ve en ese momento.

¿Hay alguna solución para obtener un contenedor en crecimiento con un encabezado y un cuerpo de desplazamiento para trabajar con IE11 y Edge? No me opongo a abandonar flexbox si es necesario.