如何防止 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 浏览器的默认设置，这意味着项目不能收缩到其内容的高度以下。但是。但是话又说回来，将 min-height: auto 添加到 IE11没有解决问题。)

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

How can I prevent flex items from shrinking in IE11 to be smaller than their content?

html

css

flexbox

internet-explorer-11