html - 为什么带有 Flex 的 HTML chalice 可以在 Chrome 上运行，但不能在 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 规范的 implied minimum sizing algorithm 有关。 .

~~我相信这是一个Firefox bug .~~

添加最小宽度: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>
          ...
          ...
          ...
          ...

更多信息:

关于html - 为什么带有 Flex 的 HTML chalice 可以在 Chrome 上运行，但不能在 Firefox 上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33732325/

html - 为什么带有 Flex 的 HTML chalice 可以在 Chrome 上运行，但不能在 Firefox 上运行？

上一篇：javascript - Bootstrap 4 菜单和 Logo 不会对齐

下一篇：javascript - 如何正确附加动态 GetUIKit Accordion ？