Ich habe ein übergeordnetes Element, das zwei untergeordnete Elemente enthält, die mit flexbox übereinander angezeigt werden. Für dieses übergeordnete Element ist die Eigenschaft max-height auf einen bestimmten Wert festgelegt. So lange der Inhalt kurz ist, soll das übergeordnete Element klein bleiben, und wenn der Inhalt wächst, wächst das übergeordnete Element mit, bis es seine maximale Höhe erreicht. An dieser Stelle sollten im Inhaltselement Bildlaufleisten angezeigt werden.

#container {
  display: flex;
  max-width: 80vw;
  max-height: 100px;
  flex-direction: column;
}

#content {
  overflow-y: auto;
}

/* styling - ignore */
#container {
  border: 2px solid black;
  margin-bottom: 1em;
}
#header {
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
#content {
  background-color: rgb(255, 255, 255);
  padding: 0 10px;
}

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Everything works as supposed to, move along</p>
  </div>
</div>

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
  </div>
</div>

Dies funktioniert perfekt unter Firefox und Chrome. In Internet Explorer werden die Bildlaufleisten im Inhaltselement nicht angezeigt. Stattdessen läuft das Inhaltselement vom übergeordneten Element über.

Ich habe versucht, mit Flex-Basis und anderen Flexbox-Attributen herumzuspielen, viel gegoogelt, aber ohne Glück.