在 ICE 上指定最大高度的 Flexbox 子溢出父级

我有一个父元素，其中包含两个子元素，这两个子元素使用 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-basis 和其他 Flexbox 属性，在谷歌上搜索了很多，但没有任何运气。

我多次尝试解决这个问题，但所有 css 解决方案似乎都无法在 IE 11 中工作。 特别是如果您想保持可变高度直到达到最大高度然后显示滚动条。 (你只需设置固定高度（不是以%为单位）即可使滚动条在 IE 中工作)

所以我使用了仅为 IE 启动的 javascript 函数

Vanilla:

const cont = document.getElementById('container');

if (cont && cont.cildren){
  const child = cont.children;
  const maxH = cont.offsetHeight - child[0].offsetHeight;

  if (maxH < child[1].offsetHeight){
    child[1].style.height = maxH + 'px';
  }
}

或 jQuery（如果您仍在使用它）：

const cont = $('#container');
const header = cont.find('.header');
const scrollCont = cont.find('.scrollContainer');
const maxH = cont.outerHeight() - header.outerHeight();

if (maxH < scrollCont.outerHeight()){
  scrollCont.height(maxH);
}

在大多数情况下，我会尽我所能避免在类似情况下使用 javascript ...但是，该死的 IE！