一个想法是display:flex;和flex-direction: row;用.flex-1和.flex-2填充container div，但这并不意味着.flex-2有默认的height:100%;，即使它扩展到全高度。

要使用height:100%;的子元素（.flex-2-child），您需要将父元素设置为height:100%;，或者在.flex-2 div上使用display:flex;和flex-direction: row;。

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

一个小演示，从.flex-2-child中删除高度并在.flex-2上使用display:flex;：http://jsfiddle.net/2ZDuE/3/

我已经回答了类似的问题这里。

我知道你已经说过position: absolute;不方便，但它有效。有关修复调整大小问题的更多信息，请参阅下面。

还可以看到这个jsFiddle的演示，尽管我只添加了WebKit前缀，所以在Chrome中打开。

你基本上有两个问题，我将分别处理。

1. 让一个flex项的子项100%填充高度

• 在子节点的父节点上设置position: relative;。
• 在孩子身上设置position: absolute;。
• 然后，您可以根据需要设置宽度/高度（在我的示例中为100%）。

2. 修复调整大小滚动“怪癖”在Chrome

• 将overflow-y: auto;放在可滚动的div上。
• 可滚动div必须指定显式高度。我的示例已经有100%的高度，但如果没有应用，您可以指定height: 0;

有关滚动问题的更多信息，请参阅这个答案。

如果我理解正确的话，你想要flex-2-child填充其父级的高度和宽度，以便红色区域完全被绿色覆盖？

如果是这样，您只需要设置flex-2即可使用Flexbox：

.flex-2 {display: flex;}

然后告诉flex-2-child变得灵活：

.flex-2-child {flex: 1;}

见http://jsfiddle.net/2ZDuE/10/

原因是flex-2-child不是Flexbox项，但它的父项是。

我想Chrome的行为更符合CSS规范（尽管它不那么直观）。根据Flexbox规范，元素的“交叉大小属性”（在本例中为height）的align-self属性仅更改使用的值的默认stretch值。而且，据我所知，百分比高度是从父元素height的指定值计算的，而不是它的使用值。父元素height的指定值不受任何flex属性的影响，仍然是auto。

设置显式的height: 100%使得正式可以计算孩子的百分比高度，就像在CSS 2.1中设置height: 100%到html可以计算body的百分比高度一样。

使用align-items: stretch

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

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

请注意，应从子组件中删除height: 100%（请参阅注释）。

或者align-items，您可以在想要拉伸的.flex-2-child项目上使用align-self。

这是我使用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核心。

这里是小提琴。

.container {height: 200px;width: 500px;display: -moz-box;display: -webkit-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;-webkit-flex-direction: row;-moz-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}.flex-1 {flex:1 0 100px;background-color: blue;}.flex-2 {-moz-box-flex: 1;-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1 0 100%;background-color: red;}.flex-2-child {flex: 1 0 100%;height: 100%;background-color: green;}

<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/

我自己找到了解决方案。假设你有下面的CSS：

.parent {align-items: center;display: flex;justify-content: center;}
.child {height: 100%; <- didn't work}

在这种情况下，将高度设置为100%将不起作用，因此我将margin-bottom规则设置为auto，例如：

.child {margin-bottom: auto;}

子级将与父级的最顶层对齐。

如果你喜欢，你也可以使用align-self规则：

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

容器. . . .对齐项：拉伸；. . . .}

这也可以在我们想要拉伸的元素上使用align-self: stretch;来解决。

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

.container {height: 200px;width: 500px;display: flex;flex-direction: row;}.flex-1 {width: 100px;background-color: blue;}.flex-2 {position: relative;flex: 1;align-self: stretch;background-color: red;}.flex-2-child {background-color: green;}

<div class="container"><div class="flex-1"></div><div class="flex-2"><div class="flex-2-child"></div></div></div>

有趣的事实：heth-100%适用于最新的chrome；但不适用于Safari；

所以顺风的解决方案是

"flex items-拉伸"

https://tailwindcss.com/docs/align-items

并递归地应用于孩子的孩子的孩子…

.parent {display: flex;}
.child {min-height: 100%;}

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

1. 有一个display: flex的父节点
2. 让你的元素显示灵活，align-self: stretch和margin-top: 0+margin-bottom: 0

最小可重复示例：

.parrent {display:flex;// the width can be anything.width: 150px;}.full-height-just-with-bg-collor {width: 100%;display: flex;align-self: stretch;// this can be just 0 or you can set just the top and bottom valuesmargin: 0 2px;background-color: green;}

<div><div class="parrent"><div class="full-height-just-with-bg-collor"></div>textForHeight</div></div>