我正在尝试创建一个带有静态标头和一个根据其内容扩展到最大高度的主体的容器。达到最大高度后，身体应滚动。我编写的代码在Chrome / Firefox中运行良好，但是在IE中，容器无法正确展开。
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>如果我flex-direction: row;改用，高度会适当扩展，但是显然我的标题看起来不合适。
是否有一种变通方法，以使具有标题和滚动体的不断增长的容器可与IE11和Edge一起使用？我不反对在必要时放弃flexbox。