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.