CSS div not respecting parent boundary
<p>I'm trying to get a div within another div with a <code>max-height</code> set to respect that height, ultimately making the content within vertically scrollable.</p>

<p>I have a list series of labels within a div which have a <code>display:block</code> and they display correctly. The parent div expands to fit those labels breaking out of it's parents max-height, which is undesirable.</p>

<p>I've tried setting overflows as well as position relative on the parent and absolute on the child (containers) and vice versa without success. I would like to know why the <code>list-container</code> does not respect the <code>content-containers</code> <code>max-height</code> param.</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>#container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#content-container {
    width: 500px;
    max-height: 20%;
    margin: auto;
    margin-top: 2%;
    font-size: 20px;
    border: 1px solid blue;
}

#list-container {
    padding-top: 20px;
    padding-left: 10px;
    border: 1px solid green;
}

.list-item {
    /* width: 100%; */
    display: block;
    border: 1px solid salmon;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="content-container"&gt;
    &lt;div id="list-container"&gt;
      &lt;label class="list-item"&gt;Content 1&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 2&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 3&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 4&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 5&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 6&lt;/label&gt;
      &lt;label class="list-item"&gt;Content 7&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks!</p>