title: How to make child div scrollable when it exceeds parent height?
body: <p>I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows.<img src="https://i.stack.imgur.com/9YxIb.png" alt="enter image description here"></p>
  
  <p>The upper child div is of variable height, but is guaranteed to be less than the height of the parent div.</p>
  
  <p>The lower child div is also of variable height.  In some cases, the heights of the child divs will make the lower child div exceed the parent.  In this case, I need to make the lower div scrollable. Note that I want only the lower div to be scrollable, not the whole parent div.</p>
  
  <p>How do I handle this?</p>
  
  <p>See attached jsfiddle for case example: <a href="http://jsfiddle.net/0yxnaywu/5/" rel="noreferrer">http://jsfiddle.net/0yxnaywu/5/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="parent"&gt;
      &lt;div class="child1"&gt;
          hello world filler
      &lt;/div&gt;
      &lt;div class="child2"&gt;
          this div should overflow and scroll down
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.parent {
      width: 50px;
      height: 100px;
      border: 1px solid black;
  }
  
  .child1 {
      background-color: red;
  }
  
  .child2 {
      background-color: blue;
  }
  </code></pre>