IE11 - 灵活的孩子充分的高度 [英] IE11 - Flex child takes full height

问题描述

我在IE11上遇到了Flexbox的问题。

我正在做的是让一个家长有三个孩子。一个固定大小的页眉，一个固定大小的页脚，以及一个应该占用剩余空间的内容区域。

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

.parent {display：flex ; flex-direction：column; max-height：500px;}。header {flex：0 0 auto;背景：红色; height：50px;}。content {background：yellow; flex：1 1 auto;位置：相对; overflow-y：scroll;}。footer {flex：0 0 auto;背景：蓝色; height：50px;}。long-item {height：2000px;}

< div class =parent> < div class =header>标题< / div> < div class =content> < div class =long-item>内容< / div> < / DIV> < div class =footer> Footer< / div>< / div>

我已经解决了这个问题，但是找不到解决方法。 IE的flex错误之一， min-height 当使用flex方向 column bug时。 b
$ b

在你的情况下，添加 display：flex 到 body 和 flex-grow：1; 到父（ flex-basis：100％或 width：100％也可以工作）
$ b

  body {display：flex;}。parent {flex-grow：1; / *填充横向空间* / display：flex; flex-direction：column; max-height：500px;}。header {flex：0 0 auto;背景：红色; height：50px;}。content {background：yellow; flex：1 1 auto;位置：相对; overflow-y：scroll;}。footer {flex：0 0 auto;背景：蓝色; height：50px;}。long-item {height：2000px;}  

< div class =parent> < div class =header>标题< / div> < div class =content> < div class =long-item>内容< / div> < / DIV> < div class =footer> Footer< / div>< / div>

I have a problem with Flexbox on IE11.

What I'm trying to do is to have one parent with 3 children. One header with a fixed size, a footer with a fixed size and in between a content area which should take the remaining space.

Here's the code - it works with Chrome but not with 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>

I already went throught the open issues but couldn't really find a solution.

解决方案

That is one of IE's flex bugs, the min-height when using flex direction column "bug".

In your case, add display: flex to the body and flex-grow: 1; to the parent (flex-basis: 100% or width: 100% will work as well).

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 - 灵活的孩子充分的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！