Eu tenho um elemento pai que contém dois elementos filhos que são exibidos um sobre o outro usando o flexbox. Este elemento pai possui a propriedade max-height configurada para um determinado valor. Portanto, desde que o conteúdo seja curto, o elemento pai deve permanecer pequeno e, à medida que o conteúdo aumenta, o elemento pai cresce com ele até atingir sua altura máxima. Neste ponto, devemos ver barras de rolagem no elemento de conteúdo.

#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>

Isso funciona perfeitamente no Firefox e Chrome. No Internet Explorer, embora as barras de rolagem no elemento de conteúdo não sejam exibidas; em vez disso, o elemento de conteúdo excede o elemento pai.

Eu tentei brincar com os atributos flex-base e outros flexbox, pesquisei bastante no Google, mas sem sorte.