Question

我在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>

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

Answer 1

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

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

IE11 - Flex儿童占据全高

1 个答案: