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的高度完全覆盖父div的区域？

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

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

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

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

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>