title: CSS dialog with header and auto content
body: <p>I'm working on HTML/CSS dialog window which has header and scrollable body.
  I want to have body sizable to its content, but show scrollbars in body if the dialog higher than browser window. Unfourtantely I can't make body scrollable, how can I fix it?
  Here is the code that I use (jsFiddle: <a href="http://jsfiddle.net/4Xvfm/1/" rel="nofollow">http://jsfiddle.net/4Xvfm/1/</a>):</p>
  
  <pre><code>&lt;div class="dialog"&gt;
      &lt;div class="header"&gt;Header&lt;/div&gt;
      &lt;div class="content"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, error, sunt, quaerat aliquid voluptatem dolorum in amet facere dolores cumque magnam placeat! Numquam, nisi, possimus facere iure eos minus repellat.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS styles:</p>
  
  <pre><code>.dialog {
      background-color: red;
      max-width: 100%;
      width: 400px;
      max-height: 100%;
  
      /* Place dialog at the center of the screen */
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  
  .dialog &gt; .header,
  .dialog &gt; .footer {
      background-color: blue;
      height: 50px;
  }
  
  .dialog &gt; .content {
      /* This doesn't work! */
      overflow: auto;
  }
  </code></pre>