#container {
  height: 70%;
  background-color: red;
}

#childContainer {
  height: 100%;
  overflow: scroll;
  background-color: blue;
}

.child {
  height: 20% !important;
}

<div id="container">
  <div id="childContainer">
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
      <div class="child"><h1>Title</h1><p>Paragraph</p></div>
  </div>
</div>

Without the h1 and p elements in the child div, the code works as expected. However these elements seem to be affecting the height of each child div, which is in turn stretching the childContainer