css - 具有 flex 的全页/ chalice 布局

Question

我正在尝试将 Flexbox 与最新的浏览器(FF 36、Chrome 41、Opera 28、Safari 8)一起使用，以实现全页 chalice 布局。我已经让它在除 Firefox 之外的所有软件中都能正常工作。

页面垂直拆分为页眉、主体、页脚。然后将 main 水平拆分为三个面板。如果每个面板的内容超出其边界，则每个面板都应独立滚动。 Firefox 是唯一不会这样做的。

这是我的例子:http://jsfiddle.net/bpnjx3v9/1/

    html, body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: blue;
  }

  #header, #footer {
    flex: 0 0 100px;
    background-color: blue;
  }

  #main {
    background-color: yellow;
    flex: 1 0 0px; /** Don't set parent of component to auto */
    display: flex;
    flex-direction: row;
  }

  .panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    overflow: auto;
  }

即使阅读了规范，我还是不明白如何让#main 只使用父级分配给它们的高度。相反，FF 似乎使它们的“固有高度”成为所有子元素的高度。是什么使它在所有其他浏览器中都能工作，但不能在 FF 中工作？指出解释这一点的规范的正确部分的奖励积分。

Answer 1

好的，所以在#main 上设置 min-height: 0px 可以修复 Firefox 并让其他人满意。

http://jsfiddle.net/hughes_matt/bpnjx3v9/7/

#main {
  background-color: yellow;
  flex: 1 0 0px; /** Don't set parent of component to auto */
  display: flex;
  flex-direction: row;
}

无法完全解释，但随后在规范中找到了这一点:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See Implied Minimum Size of Flex Items.)

main 的最小内容高度是其所有子面板的高度。通过明确允许该容器小于该容器，它会在其父容器的高度达到最大值。 Chrome/Safari/Opera 对 flex-basis: 0px 很满意，但 Firefox 还需要 min-height。

谁能告诉我这是否违反了规范？是 FF 太严格了还是其他浏览器太宽松了？