IE11 flex:1 在父级没有固定高度时导致内容溢出

Question

我有一个元素，根据场景可以有一个固定的高度或自动/未定义的高度。

我需要顶部有一个标题，底部有一个页脚，中间有一个内容区域，应该填充可用空间。 如果父元素具有固定高度，使用 flexbox 和flex:1可以正常工作，但在 IE11 中如果没有指定高度，则flex:1元素中的内容会溢出。

请参阅此处的示例： https://plnkr.co/edit/JymmiJUwrPxiM2qS?open=lib%2Fscript.js&preview

在“流体高度”演示中，内容溢出到页脚文本上。 内容元素（ .body ）根本不占用空间。 我希望内容决定.body元素的高度。

如果没有指定固定高度，我可以有一个额外的 class 关闭flex:1 ，但我不会提前知道这一点，或者控制天气是否指定了高度。 此外，我不希望使用任何其他粘性页脚解决方案（表格布局、绝对定位等）

来自 plnkr 的代码：

<div class="container" style="height: 150px; margin-bottom: 50px;">
  <div class="title">Fixed height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>


<div class="container">
  <div class="title">Fluid height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>

.container {
  border: 1px solid #000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
}

.title {
  border-bottom: 1px solid #ccc;
}

.body {
  -ms-flex: 1;
  flex: 1;
  /* overflow: auto; */
}

.footer {
  opacity: 0.5;   
}

Answer 1

对于 IE11，您需要将.body flex-shrink重置为 0，此外，不需要前缀（我运行真正的 IE11 让您知道）：

https://jsbin.com/takanicuyi/1/edit?html,css,js,output //works with IE11

 .container { border: 1px solid #000; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px; }.title { border-bottom: 1px solid #ccc; }.body { flex: 1 0 auto; }.footer { opacity: 0.5; }

 <div class="container" style="height: 150px; margin-bottom: 50px;"> <div class="title">Fixed height</div> <div class="body"> Content </div> <div class="footer">Footer</div> </div> <div class="container"> <div class="title">Fluid height</div> <div class="body"> Content </div> <div class="footer">Footer</div> </div>

与 img 类似的问题： IE11 上的 Flexbox：图像无缘无故拉伸？