如何防止 IE11 中的弹性项目缩小到小于其内容？

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 正确显示高度取决于其内容的元素？ （不用担心这里溢出的部分）虽然其他所有浏览器都正确执行，但我们的老朋友 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。但话说回来，在IE11中添加min-height: auto并不能解决问题.)