CSS flex-grow 在 Internet Explorer 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24396205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flex-grow not working in internet explorer 11
提问by katie
Hy
海
I'm having some trouble with flex in IE:
我在 IE 中遇到了 flex 问题：
Notice that the #two element has flex: auto, which is supposed to expand it to fill the container, even if there's not enough content.
请注意，#two 元素 has flex: auto，即使内容不足，它也应该扩展它以填充容器。
But it does that only in Chrome and Firefox. In IE it simply doesn't work.
但它只在 Chrome 和 Firefox 中这样做。在 IE 中它根本不起作用。
is flex-grownot supported by IE ?
是flex-grow不支持IE？
回答by Rory
In Case someone is trying this not on body but some child div. You can just set height: 0; on the element with the min-height.
万一有人不是在身体上而是在一些孩子的div上尝试这个。你可以只设置 height: 0; 在具有最小高度的元素上。
IE just wants any height on the parent element of the flex-grow auto element.
IE 只想要 flex-grow auto 元素的父元素上的任何高度。
So it could look like this:
所以它看起来像这样：
.flex-parent{
display: flex;
min-height: 300px;
height: 0;
}
.flex-child{
flex: 1 1 auto;
}
回答by William
IE requires flex: 1 1 auto
IE 需要 flex: 1 1 auto
it doesn't understand flex: 1
它不明白 flex: 1
回答by Johan Gorter
This happens because you use the min-heighton the <body>to get full height. For internet explorer, you need to use the heightproperty (use 100%or 100vh).
发生这种情况是因为您使用min-heighton<body>来获得全高。对于 Internet Explorer，您需要使用该height属性（使用100%或100vh）。
回答by Nienormalny_
I will use -ms-flex: 1 1 auto;Because IE has not full support for flex. Should be with prefix.
我会使用-ms-flex: 1 1 auto;因为 IE 还没有完全支持 flex。应该带前缀。
回答by user341234
Not really sure what you're trying to achieve but that's not how the Flexbox layouts work. To use the 'flex' property on an element it needs to be within a parent element which has the 'display:flex' property.
不确定您要实现的目标，但这不是 Flexbox 布局的工作方式。要在元素上使用 'flex' 属性，它需要位于具有 'display:flex' 属性的父元素中。
<style>
#flexContainer {
display: flex;
}
#item1 {
width: 50px;
background: #66CC33;
flex: 1;
}
#item2 {
width: 50px;
background: #0099FF;
flex: 5;
}
#item3 {
width: 50px;
background: #66CC33;
flex: 10;
}
</style>
<html>
<div id="flexContainer">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>
</html>
