Ich versuche, einen Container mit einem statischen Header und einem Body zu erstellen, der sich basierend auf seinem Inhalt auf eine maximale Höhe erweitert. Nachdem die maximale Höhe erreicht ist, sollte der Körper scrollen. Ich habe Code geschrieben, der in Chrome / Firefox hervorragend funktioniert, aber im IE wird der Container nicht richtig erweitert.

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>

Wenn ich @ benutflex-direction: row; stattdessen vergrößert sich die Höhe entsprechend, aber offensichtlich sieht mein Header dann nicht richtig aus.

ibt es eine Problemumgehung, um einen wachsenden Container mit einem Header und einem Bildlaufkörper für die Arbeit mit IE11 und Edge zu erhalten? Ich bin nicht dagegen, die Flexbox bei Bedarf aufzugeben.