Question

我尝试在我的网站上实现HTML弹性框，虽然页面在我的桌面浏览器中按预期工作，但在我的平板电脑浏览器上却没有。该页面包含2个弹性行，标题和内容。标题div的高度基于其内部的内容。内容div的高度由总页面高度确定标题高度。内容div设置为溢出滚动。

在我的桌面浏览器中，当“内容”中的内容过多时flex行一次显示，div变为可滚动。然而，在我的平板电脑浏览器中，弹性行的高度扩大到足以包含其所有内容。

桌面浏览器：Google Chrome（版本44.0.2403.157），Safari（版本8.0.2（10600.2.5）） 移动浏览器：Google Chrome（版本31.0.1650.18）

我的代码

<html>
<head>
<style>
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 50%;
  border: 2px solid;
}


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

.box .row.header {
  flex: 0 1 auto;
  max-width: 100%;
}

.box .row.content {
  flex: 1 1 auto;
    overflow: scroll;
    max-width: 100%;
}
</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>

Answer 1

由于并非所有浏览器都支持flex，或者flex和other measures like prefixes的所有功能都可能需要添加支持。请务必查看caniuse.com#feat=flexbox中的已知问题标签。

CSS Flexible Box Layout Module Level 1目前位于Last Call Working Draft，自2015年5月14日起。

为什么我的html flex代码只适用于某些broswers？

1 个答案: