title: Having trouble getting a vertical scroll bar in a child div
body: <p>I want and can't get a scroll bar to appear in the box-content div. Adding 'overflow-y:auto' doesn't work.</p>
  
  <p>My requirements:</p>
  
  <ul>
  <li>The entire layout must adjust to the browser height. That's why I
  have #wrap { ... height: 50vh; ...} </li>
  <li>The scroll bar must not include
  the header. It must only apply to the box-content div.  I want the height of the header to adjust to the contents and wrap them if necessary.</li>
  </ul>
  
  <p>Here's the css</p>
  
  <pre><code>    #wrap { 
          margin: 10px;
          height: 50vh;
          border: 2px solid black;
      }
  
      .container {
          border: 4px solid red;
          padding: 4px 3px;
          margin: 0;
          max-height: 90%;        /* As a percentage of the parent. */ 
          /* height: 300px;       /* This causes the scroll bar to appear, but its not what I want. */
      }   
  
      .box-header {
          background-color: green;
          padding: 5px 10px;
          color: white;
      }
  
      .box-content {
          border: 3px solid blue;
          overflow:auto;
          padding: 5px;
          padding-top: 10px;
          max-height:100%;
      }
  </code></pre>
  
  <p>And the HTML</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div class="container"&gt;
          &lt;div class="box-header"&gt; Header String&lt;/div&gt;
          &lt;div class="box-content"&gt;
               &lt;p&gt;line 1&lt;/p&gt;
               &lt;p&gt;line 2&lt;/p&gt;
               &lt;p&gt;line 3&lt;/p&gt;
               &lt;p&gt;line 4&lt;/p&gt;
               &lt;p&gt;line 5&lt;/p&gt;
               &lt;p&gt;line 6&lt;/p&gt;
               &lt;p&gt;line 7&lt;/p&gt;
               &lt;p&gt;line 8&lt;/p&gt;
               &lt;p&gt;line 9&lt;/p&gt;
               &lt;p&gt;line 10&lt;/p&gt;
               &lt;p&gt;line 11&lt;/p&gt;
               &lt;p&gt;line 12&lt;/p&gt;
               &lt;p&gt;line 13&lt;/p&gt;
               &lt;p&gt;line 14&lt;/p&gt;
               &lt;p&gt;line 15&lt;/p&gt;          
               &lt;p&gt;line 16&lt;/p&gt;
               &lt;p&gt;line 17&lt;/p&gt;
               &lt;p&gt;line 18&lt;/p&gt;
               &lt;p&gt;line 19&lt;/p&gt;          
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a link to a fiddle: <a href="https://jsfiddle.net/mjvancouver905/5vswprfw/" rel="nofollow noreferrer">https://jsfiddle.net/mjvancouver905/5vswprfw/</a></p>
  
  <p>Thanks.</p>