在研究灵活的盒子模型一整天后，我必须说我真的很喜欢。它实现了在JavaScript中以快速和干净的方式实现的功能。有一件事我错了：
我不能扩展一个div来采取灵活框模型计算的全尺寸！
为了说明它，我将证明一个例子。在其中，两个灵活的地方采用了精确的和高度，但它内部的div只取“< p> …< / p>”的高度元件。对于这个例子，这并不重要，但是我最初尝试的是将“灵活的盒子模型”放置在另一个“灵活的盒子模型”中，这在我看来是可能的
html,body {
font-family: Helvetica,Arial,sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Box-1 {
background-color: #E8B15B;
}
#Box-2 {
background-color: #C1D652;
}
#main {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.flexBox {
display:-moz-Box;
display:-webkit-Box;
display: Box;
text-align: left;
overflow: auto;
}
H1 {
width: auto;
}
#Box-1 {
height: auto;
-moz-Box-orient: vertical;
-webkit-Box-orient: vertical;
Box-orient: vertical;
-moz-Box-flex: 3;
-webkit-Box-flex: 3;
Box-flex: 3;
}
#Box-2 {
height: auto;
min-width: 50px;
-moz-Box-orient: vertical;
-webkit-Box-orient: vertical;
Box-orient: vertical;
-moz-Box-flex: 1;
-webkit-Box-flex: 1;
Box-flex: 1;
}
#fullsize{
background-color: red;
height: 100%;
}
<div id="main" class="flexBox"> <div id="Box-1" class="flexBox"> <div id="fullsize"> <p>Hallo welt</p> </div> </div> <div id="Box-2" class="flexBox"> </div> </div>
解决方法
我自己一直在摔跤，但终于设法提出了一个解决方案。
看到这个jsFiddle，虽然我只是在Chrome中添加了如此开放的webkit前缀。
你基本上有两个问题，我将单独处理。
获取一个flex项目的孩子填充高度100％
>设置位置：相对;在孩子的父母身上。
>设置位置：绝对;对孩子
>然后可以根据需要设置宽度/高度(我的样品中为100％)。
>修复Chrome中的调整大小滚动“quirk”
>把overflow-y：auto;在可滚动的div上。
>可滚动的div必须指定一个明确的高度。我的样本已经有100％的高度，但如果没有应用，你可以指定height：0;
有关滚动问题的更多信息，请参阅此answer。
