html - CSS Flexbox 中的 chalice 式单页应用程序 UI - 滚动面板在 Firefox 中不起作用

Question

我正在尝试使用满足以下条件的 CSS Flexbox 编写 chalice 风格的单页应用程序 UI:

• 整个容器将占据视口(viewport)高度的 100%，并且只有其内部面板会滚动
• 静态 header
• 流畅的主要内容区域，由 2 个内容“面板”组成，必要时使用 overflow-y 滚动
• 静态页脚

此设置的 HTML 如下所示:

<div class="container">
  <header>Header</header>

  <main role="main">
    <article class="box1">
      Article contents (Box 1)
    </article>

    <nav class="box2">
      Navbar contents (Box 2)
    </nav>
  </main>

  <footer>Footer</footer>
</div>

和 CSS(为简单起见省略了前缀):

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;

  height: 100%;
}

header {
  flex: none;

  height: 100px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.box1 {
  order: 2;
  flex: 3;

  overflow-y: auto;

  background-color: #BCD39B;
}

.box2 {
  order: 1;
  flex: 1;

  overflow-y: auto;

  background-color: #CE9B64;
}

footer {
  flex: none;

  height: 100px;
}

这是一个 Codepen 示例:http://codepen.io/anon/pen/VeXgMK

如果启动它，它在最新的 Chrome (47) 和 Safari (9) 中运行良好。然而，这两个主面板在 Firefox (44) 中根本不起作用——它们既不尊重它们的 flex 值，也不按预期垂直滚动。

出于某种原因，Firefox 似乎不喜欢使用 flex-direction，但我不确定如何在没有它的情况下实现我想要的 UI。我很想知道我应该主动处理哪些问题才能有效地跨浏览器完成此布局。

Answer 1

由 Michael_B 回答: 这是由于 Firefox 中的错误，可以通过向可滚动元素的父级添加 min-height 或 min-width 来解决。

来自错误报告 - https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

I'm expecting that some content will break as a result of this change, though hopefully not very much. (and hopefully "min-width:0;min-height:0;" on the flex item in question should be sufficient to fix the bustage, in each case.)