html – 在flexbox中使用’height：100％’和’align-items：str

在这个flexbox的直接子项中,我想有一个div容器也使用其父级的全高(通过设置高度：100％).

但是,div容器不会拉伸到其父级的100％高度,除非我还在flexbox的直接子级上设置了高度：100％.

它有点像虫子吗？我必须使用align-items设置flexbox的直接子项：stretch和height：100％以实现我想要的效果吗？这对我来说似乎是多余的.

这是一个例子：

html,body {
  margin: 0;
  height: 100%;
}

.flexbox {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: green;
}

.flexbox-child {
  // height: 100%; uncommenting this will get it to work
  align-items: stretch;
  background-color: blue;
}

.flexbox-grand-child {
  height: 100%;
  background-color: red;
}

<div class="flexbox">
  <div class="flexbox-child">
    <div class="flexbox-grand-child">
      I want to be stretched till the bottom
    </div>
  </div>
</div>

http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview

谢谢！