CSS Flexbox 未在 IE11 中填充高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28627879/
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
Flexbox not filling height in IE11
提问by Enrique Moreno Tent
I have this case:
我有这个案例：
http://codepen.io/anon/pen/radoPd?editors=110
http://codepen.io/anon/pen/radoPd?editors=110
This is the CSS Code:
这是 CSS 代码：
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
overflow-y: scroll;
}
For some reason, on IE11, neither the .sidebar nor the .main area will fill the whole height of the wrapper.
出于某种原因，在 IE11 上，.sidebar 和 .main 区域都不会填充包装器的整个高度。
This is inconsistency between browsers. Is this a bug? Am I missing something?
这是浏览器之间的不一致。这是一个错误吗？我错过了什么吗？
回答by Kostas Siabanis
This a known IE bugthat unfortunately has been closed as Won't Fixby IE Team and described as follows:
这是一个已知的IE 错误，不幸的是已被Won't FixIE 团队关闭，描述如下：
In all other browsers that support flexbox, a
flex-direction:columnbased flex container will honor the containersmin-heightto calculateflex-growlengths. In IE10 & 11-preview it only seems to work with an explicitheightvalue.
在所有其他支持 flexbox 的浏览器中，一个
flex-direction:column基于 flex 的容器将遵循容器min-height来计算flex-grow长度。在 IE10 和 11-preview 中，它似乎只适用于显式height值。
AFAIK and despite this description, the bug also applies when flex-directionis row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.
据我所知，尽管这个描述，错误也适用时flex-direction是row。正如评论中提到的 Philip Walton在这里提出了一个解决方案，其中包括将高度设置为固定值，但这不是 OP 的选项。
As a workaround I propose to set a min-height: 100vhto the mainelement too:
作为一种解决方法，我建议也将 a 设置min-height: 100vh为main元素：
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
min-height: 100vh;
}
Pen here.
笔在这里。
