title: CSS: container with max-height, after that, a child div should start to scroll
body: <p>I have a modal window that should be a small as possible, extend to 70% of the height. After that, the content of the modal (but not the modal itself) should start to scroll. I can't make this work.</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;div class="dialog"&gt; 
      &lt;div class="ui-root" &gt;
          &lt;div class="title" /&gt;
          &lt;div class="body" /&gt;
          &lt;div class="buttons" /&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS idea:</p>
  
  <pre><code> .dialog { max-height: 70% }
   .ui-root { display: flex }
   .body { flex: 1; overflow: scroll }
  </code></pre>
  
  <p>In words:</p>
  
  <ul>
  <li>If the body content is small, the height of .body can be the content height.</li>
  <li>If the body content is large, then .body starts to flex until it extends beyond the max-height of .dialog. Now it starts to scroll.</li>
  </ul>
  
  <p>The problem:</p>
  
  <ul>
  <li>The max-height value is ignored.</li>
  </ul>
  
  <p>Play with it:</p>
  
  <p><a href="http://jsfiddle.net/ch7n6/904/" rel="nofollow">http://jsfiddle.net/ch7n6/904/</a></p>