title: Keep inner div from expanding beyond fixed height outer div
body: <p>I need my last div ("content"), whose height can vary, to expand to fill the container div but not expand beyond it. If the content div's contents won't fit, it should simply scroll with <code>overflow-y: auto</code></p>
  
  <p>However, I can't seem to contain the content div. I've tried a host of css without success and would appreciate some help. </p>
  
  <p><strong>UPDATE</strong>
  I see I left out one important piece of info. I do not want to specify a fixed height of the "content" div since the height of the container can vary (it is resizable). I would have to calculate and adjust the height of the content with each <code>mousemove</code> (which I am trying to avoid).</p>
  
  <p>Here is <a href="https://jsfiddle.net/mseifert/0y9fdgsu/" rel="nofollow">a fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    max-height: 350px;
    width: 200px;
    border: 2px solid black;
    display: block;
    position: absolute;
  }
  #title {
    height: 100px;
    width: 100%;
    border: 2px solid red;
  }
  #tabs {
    height: 100px;
    width: 100%;
    border: 2px solid green;
  }
  #content {
    height: 100%;
    width: 100%;
    border: 2px solid blue;
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="title"&gt;
      Title
    &lt;/div&gt;
    &lt;div id="tabs"&gt;
      Tabs
    &lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;ABC&lt;/label&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>