<div class="area-one">
  <h2>Calc() is cool</h2>
  <div class="content">
    <p>The container is 100% in height. This content area needs to be as high as it, with its own overflow rule. We could make it 100% high, but then it would be too tall because there is a header above it. We know the header size, so we can make this content area calc(100% - 70px).</p>
  </div>
</div>

.area-one {
  width: 40%;
  float: left;
  height: 100%;
  margin-right: 1em;
}
.area-one > h2 {
  background: #900;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  color: white;
  margin: 0;
}

.content {
  padding: 15px;
  height: calc(100% - 50px);
  overflow: auto;
  background: red;
}
.content p {
  margin: 0 0 1em 0;
}

html, body {
  height: 100%;
  background: #ccc;
  padding: 20px;
}

body {
  padding: 20px;
  background: white;
}

* {
  box-sizing: border-box;
}