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

Question

我正在尝试在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>

flex-2-child 不能满足要求的高度，但以下两种情况除外：

1. flex-2 的高度为100％（这很奇怪，因为弹性商品默认情况下为100％，而且在Chrome中存在错误）
2. flex-2-child 绝对位置也不方便

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

Answer 1

采用 align-items: stretch

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

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

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