Flexbox 在不同浏览器中的呈现方式不同答案

【问题标题】：Flexbox renders differently in different broswersFlexbox 在不同浏览器中的呈现方式不同
【发布时间】：2015-12-28 14:58:03
【问题描述】：

我在 Google Chrome（版本 44.0.2403.157）中编写了我的 flexbox，代码按预期工作。有一列高度为 100%，该列有两行：标题和内容。标题的高度由内容定义，内容行的高度由浏览器的高度减去标题行的高度确定。但是，当我在 Safari（版本 8.0.2 (10600.2.5)）中测试我的代码时，它显示为一行和两列。我尝试在行中添加“宽度：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（我希望它的外观）

【问题讨论】：

标签： html css google-chrome safari flexbox

【解决方案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;

等等

【讨论】：

所以我实施了你的建议，它解决了行/列的问题。然而，有一个新问题是弹性行溢出弹性盒。我应该如何解决这个问题？
我很难知道到底是什么问题，我建议您使用更新的代码 sn-p 和详细信息打开另一个问题。