title: Prevent child div from overflowing parent div
body: <p>I have a parent div containing a header section and a body section. The parent div has a maximum height, but no minimum height.</p>
  
  <p>See this example: <a href="https://jsfiddle.net/1o79a6nc/2/" rel="noreferrer">https://jsfiddle.net/1o79a6nc/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cont {
    padding: 5px;
    background-color: red;
    max-height: 150px;
    max-width: 50%;
  }
  #body {
    background-color: blue;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #head {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='cont'&gt;
    &lt;div id='head'&gt;
      &lt;div&gt;Head&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id='body'&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
      &lt;div&gt;Body&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the body to only expand so that it fits inside the parent (including the padding), and then apply scroll bars when necessary.</p>
  
  <p>As the example shows, I have tried <code>overflow-y: auto</code>, however this is not working as I have intended.</p>
  
  <p>Edit: I want scroll bars to only appear on the body, so that the head section and the parent bottom padding are always visible.</p>