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

【问题标题】：IE11 flex:1 causes content to overflow when parent has no fixed heightIE11 flex:1 在父级没有固定高度时导致内容溢出
【发布时间】：2020-12-10 01:21:26
【问题描述】：

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

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

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

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

如果没有指定固定高度，我可以有一个额外的类来关闭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;   
}

【问题讨论】：

标签： css internet-explorer-11

【解决方案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 的类似问题：Flexbox on IE11: image stretched for no reason?

【讨论】：