Css 使用flex的完整页面/圣杯布局

我正在尝试将Flexbox与最新的浏览器（FF 36、Chrome 41、Opera 28、Safari 8）结合使用，以实现整页的圣杯布局。除了Firefox，我已经让它在任何地方都能工作了

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

以下是我的例子：

---

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

好的，因此在#main上设置最小高度：0px可以修复Firefox并让其他人感到高兴

无法解释，但在规范中发现：

默认情况下，flex项不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置“最小宽度”或“最小高度”属性。（参见弹性项目的暗示最小尺寸。）

main的最小内容高度是其所有子项的高度，即面板的高度。通过向容器显式授予小于该值的权限，它将在其父容器的高度达到最大值。Chrome/Safari/Opera对flex的基础很满意：0px，但Firefox还需要最小高度

---

有人知道这是否违反了规范吗？FF是过于严格还是其他浏览器过于宽松？

Firefox是当前版本中唯一为flex项目实现“最小高度：自动”/“最小宽度：自动”（又名“隐含最小尺寸”）的浏览器。因此，在这种情况下，Firefox遵循规范，而其他人（尚未）遵循规范。（有人告诉我IE已经在他们的下一代引擎中实现了这一点，而Blink[Chrome/Opera]的补丁似乎已经准备就绪）

    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 {
  background-color: yellow;
  flex: 1 0 0px; /** Don't set parent of component to auto */
  display: flex;
  flex-direction: row;
}