CSS div填充父高度

Question

我有以下 HTML

<div class="container">
  <div class="item-1">
    item 1
  <div>
  <div class="item-2">
    item 2
  <div>
</div>

因此，我创建了以下代码笔示例 http://codepen.io/anon/pen/EWXpVV

在父 div 的顶部，我想放置蓝色 div。父 div 的剩余高度应填充第二个子 div(红色)。

如何实现红色div的高度完全覆盖父div的面积？

.container {
  background-color: green;
  height: 200px;
}

.item-1 {
  background-color: blue;
}

.item-2 {
  background-color: red;
}

<div class="container">
  <div class="item-1">
    item 1
  <div>
  <div class="item-2">
    item 2
  <div>
</div>

Answer 1

与 display: flex; flex-direction: column;在父级上，以及 flex-grow: 1在要消耗剩余可用空间的元素上。您还需要正确关闭您的 div带有 </div> 的元素

.container {
  background-color: green;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.item-1 {
  background-color: blue;
}

.item-2 {
  background-color: red;
  flex-grow: 1;
}

<div class="container">
  <div class="item-1">
    item 1
  </div>
  <div class="item-2">
    item 2
  </div>
</div>