Prevent child div from expanding outside of parent?
<p>Jsfiddle showing the issue: <a href="https://jsfiddle.net/ibrewster/g6v2x7ku/12/" rel="noreferrer">https://jsfiddle.net/ibrewster/g6v2x7ku/12/</a></p>

<p>Note how the pink div expands beyond the boarders of the blue div.</p>

<p>I'm trying to make a simple layout where I have two nested divs that expand up to a certain height (100% of the window height is desired in this case), with the inner div scrolling as needed to show additional content. So if the content is short, the divs all collapse down to the size of the content, but if it is long they only expand to a point, at which time the inner div should scroll.</p>

<p>The HTML:</p>

<pre><code>&lt;div id="topDiv"&gt;
  &lt;div id="insideDiv"&gt;
    Some inside content
    &lt;br&gt; More inside content
    &lt;br&gt; More inside content
    &lt;br&gt; More inside content
    &lt;br&gt; More inside content
    &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the CSS:</p>

<pre><code>html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 50px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: 100%;
  overflow-y:auto;
}
</code></pre>

<p>Note that the effect is the same if the max-height of <code>topDiv</code> is set to a percentage, under which scenario I can't simply set the max-height value of <code>insideDiv</code> to an appropriately smaller value. Also, setting the <code>overflow</code> property on <code>topDiv</code> to hidden doesn't work - the extra content in <code>insideDiv</code> is simply completely hidden then, not accessible by scrolling.</p>

<p>How can I limit the height of <code>insideDiv</code> to not exceed the height of <code>topDiv</code>, with <code>insideDiv</code> scrolling any extra content as needed?</p>