title: How to make inner div with overflow:scroll stay inside outer div?
body: <p>I have a table within a div within another div, like this:</p>
  
  <pre><code>&lt;div id="outer">
      &lt;div class="inner">
          &lt;h4>Search results&lt;/h4>
          &lt;table>
              &lt;tr>&lt;th>Internal user&lt;/th>&lt;th>External domain&lt;/th>&lt;th># in&lt;/th>&lt;th>Last in&lt;/th>&lt;th># out&lt;/th>&lt;th>Last out&lt;/th>&lt;th>Is member&lt;/th>&lt;/tr>
              &lt;tr>&lt;td>Person Name&lt;/td>&lt;td>company.com&lt;/td>&lt;td>10&lt;/td>&lt;td>20/07/2014 13:00&lt;/td>&lt;td>11&lt;/td>&lt;td>21/07/2014 11:00&lt;/td>&lt;td>No&lt;/td>&lt;/tr>
              &lt;!-- Lots more data rows -->
          &lt;/table>
      &lt;/div>
  &lt;/div></code></pre>
  
  <p>The table body is dynamically generated by javascript.<br>
  The outer div has <code>position:fixed</code>.<br>
  The inner div has <code>overflow:scroll</code>, and should always fill the outer div but never go outside its borders.</p>
  
  <p>Additionally:</p>
  
  <ul>
  <li>If the outer div has <code>bottom</code> set to <code>auto</code>, the inner and outer divs should both expand to fit the entire table; or</li>
  <li>If the outer div has <code>bottom</code> set to any fixed value (e.g. "10px"), the inner div should remain within the outer.</li>
  </ul>
  
  <p>Similar rules should apply to the width of both divs depending on whether I set the outer div <code>right</code> to either <code>auto</code> or a fixed value.</p>
  
  <p>The plan is that I start with <code>bottom:auto</code> on the outer div while javascript generates the table body, so both divs expand to fit the table.<br>
  Then, after the table is complete, I compare the outer div's size to the viewport size.
  If the outer div's automatic size fits in the viewport, I leave it as <code>auto</code>, otherwise I set fixed values to make it fit in the viewport, and the user can scroll to see the rest of the table.</p>
  
  <p>Is there any single set of CSS rules that will achieve this, when the only properties I change in javascript are on the outer div?</p>
  
  <p>The closest I've got is to set both <code>height:100%</code> and <code>width:100%</code> on the inner div. The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div.</p>
  
  <p>I've also tried:</p>
  
  <ul>
  <li>Not setting any dimensions on the inner div. This makes it always size to the table, ignoring the size of the outer div; and</li>
  <li>Setting <code>position:absolute</code> and left/top/right/bottom all to 0 on the inner div. This makes both divs go to zero size when the outer div's size is <code>auto</code>.</li>
  </ul>
  
  <p>This would be simpler with only one div instead of two, but two borders of different colours provide better contrast in the web application this is designed for.</p>
  
  <p>Here's a JSFiddle: <a href="http://jsfiddle.net/jr5R2" rel="nofollow">http://jsfiddle.net/jr5R2</a></p>