IE11 flex:1 当parent 没有固定高度时导致内容溢出

Question

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

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

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

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

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

来自 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 //适用于 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 flex:1 当parent 没有固定高度时导致内容溢出

IE11 flex:1 causes content to overflow when parent has no fixed height

css

internet-explorer-11