O Internet Explorer não expande um flexbox com flex-direction: column

Estou tentando criar um contêiner com um cabeçalho estático e um corpo que se expanda com base em seu conteúdo até uma altura máxima. Depois que a altura máxima é atingida, o corpo deve rolar. Eu escrevi um código que funciona muito bem no Chrome / Firefox, mas no IE, o contêiner não se expande corretamente.

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>

Se eu usarflex-direction: row; em vez disso, a altura se expande de maneira apropriada, mas obviamente meu cabeçalho não parece certo no momento.

Existe uma solução alternativa para obter um contêiner crescente com um cabeçalho e corpo de rolagem para trabalhar com o IE11 e o Edge? Não sou contra abandonar o flexbox, se necessário.

questionAnswers(2)

yourAnswerToTheQuestion