我创建了一个简单的基于flexbox的页面,可以在Google Chrome(版本44.0.2403.157)中正确呈现,但在Safari(版本8.0.2(10600.2.5))中则不能.我已经添加了所有相关的前缀(我认为)并且花了很多时间查看检查器,但我似乎没有找到问题的原因.
该页面由一个容器和两个弹性行组成.第一个弹性行(标题)应该具有高度拉伸以适合其内容.第二个flex行(内容)应该具有浏览器高度减去标题高度的高度,此容器的溢出设置为滚动.当内容容器不必滚动时,代码工作正常,但只要内容容器有任何溢出,标题行就不再包含其内容.可能是什么导致了这个？
代码:
<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}
.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: …