在 IE 上指定最大高度的 Flexbox 子级溢出父级答案

【问题标题】：Flexbox children overflow parent with max-height specified on IE在 IE 上指定最大高度的 Flexbox 子级溢出父级
【发布时间】：2016-04-09 07:31:37
【问题描述】：

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

【问题讨论】：

你没有提到IE是哪个版本，但支持那里...呃... 不是一流的。见CanIUse.com
嗯，flexbox 是在 IE10 中实现的，在这种情况下，IE11 的行为方式与 IE10 完全相同。
已实施但仍有问题...请参阅给定链接中列出的问题。
明显重复（IE 未解决）-stackoverflow.com/questions/22914399/…
您找到解决方案了吗？我也遇到了同样的问题。

标签： css internet-explorer flexbox

【解决方案1】：

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

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

You can find out how detect browser here.

香草：

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！

【讨论】：

【解决方案2】：

尝试使用 height: 100px 而不是 max-height: 100px;在#container 上，即：

#container {
  display: flex;
  max-width: 80vw;
  height: 100px;
  flex-direction: column;
}

#container {
  display: flex;
  max-width: 80vw;
  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>

【讨论】：