如何使Flexbox子代的父母身高达到100％？

我正在尝试在Flexbox中填充Flex项目的垂直空间。

.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％（这很奇怪，因为弹性项默认情况下为100％，而且在Chrome中存在错误）
2. flex-2-child 绝对位置也不方便

目前，该功能不适用于Chrome或Firefox。

采用 align-items: stretch

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

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

或者到align-items，你可以使用align-self只是在.flex-2-child你想拉长项目。

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

我知道您已经说过position: absolute;不便，但是可以。有关解决调整大小问题的更多信息，请参见下文。

另请参阅此jsFiddle进行演示，尽管我仅添加了在Chrome中打开的webkit前缀。

您基本上有2个问题，我将分别处理。

1. 让弹性项目的子项填充高度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项，但它的父项是flexbox。

我认为Chrome的行为与CSS规范更加一致（尽管不太直观）。根据Flexbox规范，属性的默认stretch值仅更改元素的“交叉尺寸属性”（在本例中为）的使用值。而且，据我了解CSS2.1规范，百分比高度是根据父级的指定值（而不是其使用的值）计算得出的。父级的指定值不受任何flex属性影响，并且仍为。align-selfheightheightheightauto

显式设置height: 100%可以正式计算子项的百分比高度，就像设置height: 100%为html可以计算bodyCSS2.1中的高度百分比一样。

我自己找到了解决方案，假设您有以下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;
}

一个想法是display:flex;with 用和flex-direction: row;填充containerdiv ，但这并不意味着它具有默认值，即使将其扩展到全高并带有子元素（）也需要将父元素设置为或使用与上格了。.flex-1.flex-2.flex-2height:100%;.flex-2-childheight:100%;height:100%;display:flex;flex-direction: row;.flex-2

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

一个小型演示，删除了以下内容的高度.flex-2-child并display:flex;在.flex-2以下位置使用：http : //jsfiddle.net/2ZDuE/3/

html

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

的CSS

.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;
}

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

这也可以通过align-self: stretch;我们要拉伸的元素来解决。

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

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

。容器 { 。。。。align-items：拉伸；。。。。}

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

听到小提琴