'完全可用的高度'内部div - 为什么这个工作？

Question

我有一个在CSS中工作的布局，但我不明白为什么它的工作原理。 CSS专家，请详细说明这里发生的事情。

我的目标是拥有这样的布局：

突出的特点是：

1. 窗口顶部和底部的固定高度页眉和页脚
2. 占据页眉和页脚之间空间的内容区域
3. 内容区域有自己的滚动条（即它不会将页脚向下推过屏幕底部）。

我使用css弹性框和内容div内的div的组合实现了它，高度为0％。与我的期望相反，0％高度div延伸到完全可用的高度。

这是一个JSFiddle：http://jsfiddle.net/2wunC/（它看起来不太正确，因为外部height:100%在jsfiddle容器中没有意义。）

HTML

<div id="everything">
  <div id="header">fixed-height header</div>
  <div id="workspace">
    <div class="docstretch"><div class="docwindow">
      filler text<br>filler text<br>filler text<br>...
    </div></div>
  </div>
  <div id="footer">fixed-height footer</div>
</div>

CSS

#everything {display:-webkit-flex;-webkit-flex-flow:column;-webkit-align-items:stretch;height:100%;}
#header {height:2em;background:lightgray;}
#footer {height:2em;background:darkgray;}
#workspace {-webkit-flex:1 0 auto;display:-webkit-flex;-webkit-flex-flow:row;}
.docstretch {background:#05c;color:white;width:300px;overflow-y:scroll;}
.docwindow {height:0%;} /* why does this work? */

我的问题：内嵌div height:0%的嵌套div（docstretch和docwindow）创建了我想要的内容div，占据了页面的完整“内部空间”拥有自己的滚动条。但为什么？这是一个安全的解决方案吗？

Answer 1

如果你拿走所有Flexbox属性，你会发现它根本与Flexbox无关：

http://jsfiddle.net/2wunC/2/

问题是您有height: 0%。删除％，它可以正常工作：

http://jsfiddle.net/2wunC/1/