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>

解决方法

我自己一直在摔跤，但终于设法提出了一个解决方案。

看到这个jsFiddle，虽然我只是在Chrome中添加了如此开放的webkit前缀。

你基本上有两个问题，我将单独处理。

获取一个flex项目的孩子填充高度100％

>设置位置：相对;在孩子的父母身上。
>设置位置：绝对;对孩子
>然后可以根据需要设置宽度/高度(我的样品中为100％)。

>修复Chrome中的调整大小滚动“quirk”

>把overflow-y：auto;在可滚动的div上。
>可滚动的div必须指定一个明确的高度。我的样本已经有100％的高度，但如果没有应用，你可以指定height：0;

有关滚动问题的更多信息，请参阅此answer。