Css div fill parent height

Question

I have the following HTML

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

wherefore I created the following codepen example http://codepen.io/anon/pen/EWXpVV

At the top of the parent div I want to place the blue div. The remaining height of the parent div should be filled with the second child div (red one).

How can I achieve that the height of the red div completely covers the area of ​​the parent 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

With display: flex; flex-direction: column; on the parent, and flex-grow: 1 on the element you want to consume the rest of the available space. You also need to properly close your div elements with </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>