title: Scrollable child element when parent reaches its max-height
body: <p>I have a modal window which displays a form. The user has the ability to click a button to add new rows to the form. As each new row is appended, the entire modal window should grow in height until it's <code>50px</code> away from the bottom of the viewport.</p>
  
  <p>Sample markup from the demo:</p>
  
  <pre><code> &lt;div class="parent"&gt;
      &lt;h4&gt;window title&lt;/h4&gt;
      &lt;a href="#"&gt;add new row&lt;/a&gt;
      &lt;section&gt;
        &lt;h4&gt;content&lt;/h4&gt;
        &lt;p&gt;some random content which never scrolls&lt;/p&gt;
        &lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm essentially using a div with absolute positioning to contain the modal window. As the window grows it will eventually hit this height and I could then <code>overflow-y: scroll</code> the contents.</p>
  
  <p>The trouble is, only the form itself should scroll. As each new row is added, the window should grow in height until it reaches its parents' height. At this point, only the <code>ul</code> contents should scroll - not the entire modal.</p>
  
  <p>I realize this can be done with javascript, but I'm hoping to find a pure css solution so that can avoid DOM-specific logic in our app, and having to account for viewport resize events, etc.</p>
  
  <ul>
  <li>overflow-y only works when there's a max-height for the container. I can't set that for the list because I don't know what it will be.</li>
  <li>I <em>could</em> make the height dynamic for the list with absolute positioning, but then the parent window loses it's height and never adjusts when the child does.</li>
  </ul>
  
  <p><a href="http://jsbin.com/wanipiw/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/wanipiw/1/edit?html,css,js,output</a></p>