我有这个案例:
http://codepen.io/anon/pen/radoPd?editors=110
这是 CSS 代码:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
overflow-y: scroll;
}
出于某种原因,在 IE11 上,.sidebar 和 .main 区域都不会填满包装器的整个高度。
这是浏览器之间的不一致。这是一个错误吗?我错过了什么吗?
最佳答案
这是一个已知的IE bug不幸的是,它已被 IE 团队关闭为 Won't Fix
并描述如下:
In all other browsers that support flexbox, a
flex-direction:column
based flex container will honor the containersmin-height
to calculateflex-grow
lengths. In IE10 & 11-preview it only seems to work with an explicitheight
value.
据我所知,尽管有此描述,但当 flex-direction
为 row
时,该错误也适用。正如评论中提到的,Philip Walton 提出了一个解决方案 here ,其中包括将高度设置为固定值,但这不是 OP 的选项。
作为解决方法,我建议也为 main
元素设置一个 min-height: 100vh
:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
min-height: 100vh;
}
笔here .
关于css - IE11 中的 Flexbox 不填充高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28627879/