Я пытаюсь создать контейнер со статическим заголовком и телом, которое расширяется на основе его содержимого до максимальной высоты. После достижения максимальной высоты тело должно прокрутиться. Я написал код, который прекрасно работает в 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 в случае необходимости.