为什么我的HTML Flex代码仅在某些浏览器中有效？

Question

I have tried implementing HTML flex boxes in my website and while the page works as expected in my desktop browser, on my tablet browser it does not. 我曾尝试在网站上实现HTML flex框，而该页面在桌面浏览器中可以正常工作，而在平板电脑浏览器中却没有。 The page consists for 2 flex rows, header and content. 该页面包含2个弹性行，标题和内容。 The header div has a height that is based on the content inside it. 标头div的高度取决于其内部的内容。 The content div has a height that is determined the header height from the total page height. 内容div的高度由页面总高度决定标题高度。 The content div is set to overflow scroll. 内容div设置为溢出滚动。

In my desktop browser, when there is too much content in the 'content' flex row to be displayed at once, the div becomes scrollable. 在我的桌面浏览器中，如果“内容”弹性行中的内容太多而无法一次显示，则div可以滚动。 However in my tablet browser, the flex row expands its height to become big enough to contain all of its content. 但是，在我的平板电脑浏览器中，flex行将其高度扩展到足以容纳其所有内容的高度。

Desktop Browser : Google Chrome (Version 44.0.2403.157), Safari (Version 8.0.2 (10600.2.5)) Mobile Browser : Google Chrome (Version 31.0.1650.18) 桌面浏览器 ：Google Chrome（版本44.0.2403.157），Safari（版本8.0.2（10600.2.5）） 移动浏览器 ：Google Chrome（版本31.0.1650.18）

My code 我的密码

<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

Because not all browsers support flex or all features of flex and other measures like prefixes maybe be required to add support. 因为不是所有的浏览器都支持柔性的或所有功能flex和其他措施，比如前缀可能需要添加支持。 Make sure to check the Known Issues tab from caniuse.com#feat=flexbox . 确保检查caniuse.com#feat=flexbox的“ 已知问题”选项卡。

CSS Flexible Box Layout Module Level 1 is currently in Last Call Working Draft since May 14th, 2015. 自2015年5月14日起，“ CSS Flexible Box Layout Module Level 1目前处于“ 上次呼叫工作草案”中。

为什么我的HTML Flex代码仅在某些浏览器中有效？

问题描述

1 个解决方案

解决方案1
2 2015-09-29 20:34:35

为什么我的HTML Flex代码仅在某些浏览器中有效？

问题描述

1 个解决方案

解决方案1 2 2015-09-29 20:34:35

解决方案1
2 2015-09-29 20:34:35