html - 如何防止 IE11 中的 flex 元素缩小到小于其内容？

Question

假设以下标记:( JSFiddle link )

.parent {
  width: 200px;
  border: 1px solid #ccc;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.space-avail-sets-height {
  overflow: auto;
}

<div class="parent">
  <div class="content-sets-height">
    <h3>This part should be as tall as it needs to be to fit the content.</h3>
  </div>
  <div class="space-avail-sets-height">This part should take whatever height is remaining, and then use scrolling to view the content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.</div>
  <div class="content-sets-height">This part should be as tall as it needs to be to fit the content.</div>
</div>

如何使 IE11 正确显示高度取决于内容的元素？ (不用担心这里溢出的部分)虽然其他所有浏览器都正确地做到了，但我们的老 friend IE 却把它吐到了页面上:

Answer 1

将此添加到您的代码中:

.parent > div:first-child,
.parent > div:last-child {
  flex-shrink: 0;
}

无论出于何种原因，IE11 都需要禁用 flex-shrink。 (可能是因为 min-height: auto 是非 IE 浏览器的默认设置，这意味着元素不能收缩到其内容的高度以下。但是 in IE11 the default may be min-height: 0 。但是话又说回来，添加 min-height: auto 到 IE11 不能解决问题。)