Los hijos de Flexbox desbordan a los padres con la altura máxima especificada en IE

Tengo un elemento primario que contiene dos elementos secundarios que se muestran uno encima del otro mediante flexbox. Este elemento primario tiene la propiedad max-height establecida en un cierto valor. Por lo tanto, siempre que el contenido sea corto, se supone que el elemento padre debe mantenerse pequeño, y a medida que el contenido crece, el elemento padre crece con él hasta que alcanza su altura máxima. En este punto, deberíamos ver barras de desplazamiento en el elemento de contenido.

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

Esto funciona perfectamente en Firefox y Chrome. En Internet Explorer, aunque las barras de desplazamiento en el elemento de contenido no se muestran; en cambio, el elemento de contenido se desborda del elemento principal.

Traté de jugar con flex-base y otros atributos de flexbox, busqué mucho en Google, pero sin suerte.