关于CSS：IE11中的Flex-grow不会垂直拉伸


Flex-grow in IE11 doesn't vertically stretch

我以为IE 11完全支持flexbox属性，但是行为却不同于Chrome / Firefox

我将其简化为一个简单的示例：我正在尝试使高度为100％的div的内部具有一个flex子级，该子级也将增长为100％的高度。 它可以在chrome和Firefox中使用，但在IE上，flex子的高度不会增加...

小提琴：https://jsfiddle.net/7qgbkj0o/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body, html {
  background-color: red;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin:0;
}
.p{
  display: flex;
  min-height: 100%;
}

.c1 {
  flex-grow: 1;
  background-color: gray;
}
1
  asdasd

在IE11上：http：//imgur.com/a/eNKIJ

在Chrome上：http：//imgur.com/a/xYmJW

我知道不使用flexbox可能有实现此目的的替代方法，但在我的实际情况下，我确实需要在此处使用flexbox，这是怎么回事，如何使用flexbox在IE11上实现此目的？

相关讨论

似乎IE11只有一个min-height有问题。

尝试增加基本高度。

1
2
3
4
5
.p{
  display: flex;
  min-height:100%;
  height: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body,
html {
  background-color: red;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.p {
  display: flex;
  min-height: 100%;
  height: 100%;
}
.c1 {
  flex: 1;
  background-color: gray;
}
1
    asdasd

相关讨论

我有一个类似的情况，其中：

1
.container {min-height: 500px; height: auto;}

没用，但这：

1
.container {height: 500px;}

在IE中完美对齐。

声明特定高度而不是auto应该起作用。