.容器{高度：200px；宽度：500px；显示：-moz框；显示：-webkit flexbox；显示：-ms flexbox；显示：-webkit flex；显示：-moz flex；显示：柔性；-webkit flex方向：行；-moz-flex方向：行；-ms flex方向：行；弯曲方向：行；}.flex-1型{柔性：100像素；背景色：蓝色；}.flex-2型{-moz-box flex:1；-webkit flex:1；-moz-flex：1；-ms flex:1；弹性：100%；背景色：红色；}.flex-2-儿童{弹性：100%；高度：100%；背景色：绿色；}<div class=“container”><div class=“flex-1”></div><div class=“flex-2”><div class=“flex-2-child”></div></div></div>

http://jsfiddle.net/2ZDuE/750/

这也可以通过对齐自身来解决：拉伸；在我们想要拉伸的元素上。

有时，在Flexbox设置中只拉伸一个项目是可取的。

.容器{高度：200px；宽度：500px；显示：柔性；弯曲方向：行；}.flex-1型{宽度：100px；背景色：蓝色；}.flex-2型{位置：相对；挠曲：1；对齐自身：拉伸；背景色：红色；}.flex-2-儿童{背景色：绿色；}<div class=“container”><div class=“flex-1”></div><div class=“flex-2”><div class=“flex-2-child”></div></div></div>

这是我使用css+的解决方案。

首先，如果第一个子项（flex-1）应该是100px，那么它不应该是flex。

事实上，在css+中，您可以设置灵活和/或静态元素（列或行），您的示例变得如此简单：

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

容器CSS：

.container {
    height: 200px;
    width: 500px;
    position: relative;
}

显然包括css+0.2内核。

这是小提琴。

我认为Chrome的行为更符合CSS规范（尽管它不那么直观）。根据Flexbox规范，align self属性的默认拉伸值仅更改元素的“交叉大小属性”（在本例中为高度）的使用值。而且，据我了解CSS2.1规范，百分比高度是根据父级高度的指定值计算的，而不是使用的值。父对象高度的指定值不受任何弹性财产的影响，仍然是自动的。

设置显式高度：100%可以正式计算孩子的身高百分比，就像将高度：100%设置为html可以计算CSS 2.1中身体的身高百分比一样。

我自己找到了解决办法。假设您有以下CSS：

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

在这种情况下，将高度设置为100%将不起作用，因此我将边距底部规则设置为自动，例如：

.child {
  margin-bottom: auto;
}

子对象将与父对象的最顶端对齐。

如果您愿意，也可以使用对齐自规则：

.child {
  align-self: flex-start;
}

一个想法是显示：flex；弯曲方向：行；正在用.flex-1和.flex-2填充容器div，但这并不意味着.flex-2具有默认高度：100%；，即使它延伸到全高。

并且具有高度为100%的子元素（.flex-2-child）；，您需要将父对象设置为高度：100%；或使用显示器：flex；弯曲方向：行；在.flex-2分区上。

据我所知，display：flex不会将所有子元素的高度扩展到100%。

一个小演示，去掉了.flex-2-child的高度，并使用了display：flex；在flex-2上：http://jsfiddle.net/2ZDuE/3/