Question

我正在尝试将Flexbox与最新的浏览器（FF 36，Chrome 41，Opera 28，Safari 8）一起使用，以实现整页圣杯布局。除了Firefox之外，我已经把它用在了所有东西上。

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

    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似乎使他们的＆＃34;内在高度＆＃34;所有子元素的高度。是什么让这在所有其他浏览器中工作，但不是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;
}

无法解释它，但后来在规范中找到了这个：

默认情况下，弹性项目不会缩小到最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。（参见Flex项目的隐含最小尺寸。）

主要的最小内容高度是其所有孩子的面板高度。通过为该容器提供小于该容器的显式权限，它在其父级的高度处最大化。 Chrome / Safari / Opera对基于弹性的基础感到满意：0px，但除此之外，Firefox还需要最小高度。

任何人都可以判断这是否违反规范？ FF是否过于严格或其他浏览器过于宽松？

带有flex的整页/圣杯圣杯布局

1 个答案: