HTML5弹性箱型号高度计算

在研究灵活的盒子模型一整天后，我必须说我真的很喜欢。它实现了在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>