css - IE11 - Flex 子项占据全高

Question

我在 IE11 上使用 Flexbox 时遇到问题。

我想做的是让一位 parent 带着 3 个 child 。一个固定大小的页眉，一个固定大小的页脚，内容区域之间应占据剩余空间。

这是代码 - 它适用于 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>

我已经解决了 Unresolved 问题，但找不到真正的解决方案。

Answer 1

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

在您的情况下，将 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>