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

有时，在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内核。

这是小提琴。

使用对齐项目：拉伸

与David Storey的回答类似，我的解决方法是：

.flex-2 {
    display: flex;
    align-items: stretch;
}

请注意，高度：应从子组件中删除100%（请参见注释）。

或者，为了对齐项目，您可以仅在要拉伸的.flex-2-子项目上使用align self。

另一种方法（其他选项不适合我的情况，因为我需要更通用的解决方案，我真的希望尽可能避免使用position:absolute，以及display:flex和align-items:stretch，因为其他syling在我的情况下不起作用）：

具有显示的父对象：flex还可以让元素显示灵活，对齐self:stretch和margin-top:0+margin-bottom:0

最小可重复性示例：

.鹦鹉{显示：柔性；//宽度可以是任意的。宽度：150px；}.全高，仅含bg胶体{宽度：100%；显示：柔性；对齐自身：拉伸；//这可以仅为0，也可以仅设置顶部和底部值边距：0 2px；背景色：绿色；}＜div＞<div class=“parrent”><div class=“full-height just with bg-color”></div>text高度</div></div>

.parent {
    display: flex;
}

.child {
    min-height: 100%;
}

.容器{高度：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/