IE11 - Flex 孩子需要全高[重复]

【问题标题】：IE11 - Flex child takes full height [duplicate]IE11 - Flex 孩子需要全高[重复]
【发布时间】：2018-02-10 07:19:45
【问题描述】：

我在 IE11 上遇到了 Flexbox 问题。

我想要做的是让一个父母有 3 个孩子。一个固定大小的页眉，一个固定大小的页脚，位于内容区域之间，应该占据剩余空间。

这是代码 - 它适用于 Chrome，但不适用于 IE11：

.parent {
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.header {
  flex: 0 0 auto;
  background: red;
  height: 50px;
}

.content {
  background: yellow;
  flex: 1 1 auto;
  position: relative;
  overflow-y: scroll;
}

.footer {
  flex: 0 0 auto;
  background: blue;
  height: 50px;
}

.long-item {
  height: 2000px;
}

<div class="parent">
  <div class="header">Header</div>
  <div class="content">
    <div class="long-item">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

我已经解决了未解决的问题，但无法真正找到解决方案。

【问题讨论】：

相关代码直接属于您的问题。请阅读How to Ask，然后相应地编辑您的问题。

标签： css flexbox internet-explorer-11 styling

【解决方案1】：

这是 IE 的 flex 错误之一，min-height 使用 flex 方向时column“错误”。

在您的情况下，将display: flex 添加到body 并将flex-grow: 1; 添加到parent（flex-basis: 100% 或width: 100% 也可以使用）。

body {
  display: flex;
}

.parent {
  flex-grow: 1;           /*  fill horizontal space */
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.header {
  flex: 0 0 auto;
  background: red;
  height: 50px;
}

.content {
  background: yellow;
  flex: 1 1 auto;
  position: relative;
  overflow-y: scroll;
}

.footer {
  flex: 0 0 auto;
  background: blue;
  height: 50px;
}

.long-item {
  height: 2000px;
}

<div class="parent">
  <div class="header">Header</div>
  <div class="content">
    <div class="long-item">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

【讨论】：