我如何使Flexbox儿童100%的高度，他们的父母？

Question

我试着在Flexbox中填充一个挠性物品的垂直空间。

​

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

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

​

这是JSFiddle

除了以下两种情况外，flex-2-child不填充所需的高度：

1. flex-2的高度为100% (这很奇怪，因为在默认情况下，flex有100% +它在Chrome中是错误的)
2. flex-2-child有一个绝对位置，这也不方便。

这在Chrome或Firefox中是行不通的。

Answer 1

使用align-items: stretch

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

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

注意，应该从子组件中删除height: 100% (参见注释)。

或者，对于align-items，您可以在您想要扩展的.flex-2-child项上使用align-self。

Answer 2

我回答了一个类似的问题，这里。

我知道你已经说过position: absolute;不方便，但是它很有用。有关修改大小问题的进一步信息，请参见下面。

尽管我只在Chrome中添加了非常开放的jsFiddle前缀，但也可以看到这个示例的WebKit。

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

1. 获取弹性项的子级以填充高度100%。

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

1. 修复Chrome中大小调整的滚动“怪癖”

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

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

Answer 3

如果我理解正确的话，你想让flex-2的孩子填充它的父母的高度和宽度，这样红色区域就完全被绿色覆盖了？

如果是这样的话，您只需要设置flex-2来使用Flexbox：

.flex-2 {
    display: flex;
}

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

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

请参阅http://jsfiddle.net/2ZDuE/10/

原因是flex-2子项目不是Flexbox项，而是它的父项。