Safari flexbox未正确包含其元素
Ale*_*ton 11 html css safari flexbox
我创建了一个简单的基于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: 1 1 auto;
flex: 1 1 auto;
overflow: scroll;
}
</style>
</head>
<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
<p>Header - The height of the header is based on the content</p>
<p>Header - The height of the header is based on the content</p>
</div> <!-- end of flex row header -->
<div class="row content">
<p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>
使用没有溢出的内容框正确渲染:
内容框溢出时呈现错误:
rat*_*lue 17
头并没有扩张的原因是因为您指定flex-shrink: 1的.box .row.header
通过说允许内容缩小,你会让标题被它下面的内容区域压扁.
改变这个:
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
对此:
.box .row.header {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
您的页面现在可以在Safari中使用.
| 归档时间： |
|
| 查看次数： |
11433 次 |
| 最近记录： |