Question

我在Google Chrome（版本44.0.2403.157）中对我的flexbox进行了编码，代码按预期工作。有一列高度为100％，此列有两行：标题和内容。标题具有由内容定义的高度，内容行的高度由浏览器的高度减去头行的高度确定。但是，当我在Safari（版本8.0.2（10600.2.5））中测试我的代码时，它显示为一行两列。我尝试在行中添加＆＃34; width：100％：强制那里只有一列但是这不起作用。造成这种差异的原因是什么？如何解决？

<html>
<head>
<style>
.box {
display: -webkit-flex;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-flow: column;
  height: 100%;
  width: 100%;
  border: 2px solid;
}


.box .row {
  flex: 0 1 30px;
    border: 2px solid;
    width: 100%;
}

.box .row.header {
-webkit-flex: auto;
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
    overflow: scroll;
}

</style>
</head>
<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
Header - The height of the header is based on the content
</div> <!-- end of flex row header -->
<div class="row content">
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>

</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>

Safari（不是我想要的样子）

Chrome（我希望它看起来如何）

Answer 1

看看这个http://caniuse.com/#feat=flexbox

您只需在容器上设置这些：

display: -ms-flexbox;  /* IE 10 */
display: -webkit-flex; /* Safari 8 */
display: flex;         /* Modern browsers */

和

-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;

对于子元素：

-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;

等

Flexbox在不同的broswers

1 个答案: