Prevent child div from overflowing parent div
<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>