У меня есть родительский элемент, который содержит два дочерних элемента, которые отображаются друг на друга с помощью flexbox. Этот родительский элемент имеет свойство max-height, установленное на определенное значение. Таким образом, до тех пор, пока содержимое короткое, родительский элемент должен оставаться маленьким, а по мере увеличения содержимого родительский элемент увеличивается вместе с ним до тех пор, пока не достигнет максимальной высоты. На этом этапе мы должны увидеть полосы прокрутки на элементе содержимого.

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

Это отлично работает на Firefox и Chrome. В Internet Explorer полосы прокрутки в элементе содержимого не отображаются; вместо этого элемент содержимого переполняется из родительского элемента.

Я пытался поиграться с flex-base и другими атрибутами flexbox, много гуглил, но безуспешно.