为什么 HTML flex 的圣杯适用于 Chrome 但不适用于 Firefox?
Why is HTML holy grail with flex works on Chrome but not on Firefox?
代码:http://plnkr.co/edit/swHKE2?p=preview。另请参阅下面的代码段。
代码是Holy grail的例子。
在 Chrome (v46.0.2490.80 m) 上它完美运行 - 有页眉、页脚、边,只有内容可以滚动而不隐藏框架。
在 FF (v42.0) 上,垂直滚动在所有内容上,忽略 flex 指令。
知道如何修复样式以在 FF 上具有正确的行为吗?谢谢。
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
这与 flexbox 规范的有关。
我相信这是一个Firefox bug。
将 min-width: 0; min-height: 0
添加到第一个嵌套的 flex 容器似乎可以解决问题:
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1; min-width: 0; min-height: 0;"> <!-- ADJUSTEMENT -->
<div>NAV|</div>
...
...
...
...
更多信息:
代码:http://plnkr.co/edit/swHKE2?p=preview。另请参阅下面的代码段。
代码是Holy grail的例子。
在 Chrome (v46.0.2490.80 m) 上它完美运行 - 有页眉、页脚、边,只有内容可以滚动而不隐藏框架。
在 FF (v42.0) 上,垂直滚动在所有内容上,忽略 flex 指令。
知道如何修复样式以在 FF 上具有正确的行为吗?谢谢。
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
这与 flexbox 规范的
我相信这是一个Firefox bug。
将 min-width: 0; min-height: 0
添加到第一个嵌套的 flex 容器似乎可以解决问题:
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1; min-width: 0; min-height: 0;"> <!-- ADJUSTEMENT -->
<div>NAV|</div>
...
...
...
...
更多信息: