css - 在 IE 上指定最大高度的 Flexbox 子项溢出父项

Question

我有一个包含两个子元素的父元素，它们使用 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 属性，用谷歌搜索了很多，但没有任何运气。

Answer 1

我多次尝试解决这个问题，但似乎没有一个 css 解决方案在 IE 11 中有效。特别是如果你想保持可变高度直到达到最大高度然后显示滚动条。(您只需设置固定高度(不是百分比)即可使滚动条在 IE 中工作)

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

You can find out how detect browser here.

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!