title: Vertical Scrollbar disappears in absolutely positioned element
body: <p><strong>EDIT</strong> : Added : <a href="http://jsfiddle.net/bfNzH/1/" rel="nofollow noreferrer">http://jsfiddle.net/bfNzH/1/</a></p>
  
  <p>My Html is structured like so :</p>
  
  <pre><code>    &lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="left"&gt;left bar&lt;/div&gt;
          &lt;div class="right"&gt;
              &lt;div class="topbar"&gt;topbar&lt;/div&gt;
              &lt;div class="header"&gt;header&lt;/div&gt;
              &lt;div class="content"&gt;
                  &lt;div&gt;..some stuff&lt;/div&gt;
                  &lt;table&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="th1"&gt;Col1&lt;/th&gt;
                              &lt;th&gt;Col2&lt;/th&gt;
                              &lt;th&gt;Col3&lt;/th&gt;
                              &lt;th&gt;Col4&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;&lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code> body {
      height : 100%;
  }
  .wrapper {
      position : absolute;
      top : 0;
      bottom : 0;
      left : 0;
      right : 0;
      overflow : hidden;
  }
  .left {
      height : 100%;
      position : absolute;
      width : 50px;
      overflow : hidden;
      border-right : 1px solid black;
  }
  .right {
      position : absolute;
      top : 0;
      left : 50px;
      bottom : 0;
      right : 0;
      //border : 1px solid red;
  }
  .topbar {
      height : 20px;
      display : table;
      width : 100%;
      border-bottom : 1px solid green;
  }
  .header {
      height : 30px;
      display : table;
      width : 100%;
  }
  .content {
      width : 100%;
      height : 100%;
      position : absolute;
      overflow : auto;
      top : 50px;
      bottom : 0px;
      border-top : 1px solid yellow;
      border-bottom : 1px solid yellow;
  }
  .th1 {
      width : 50%;
  }
  table {
      width : 100%;
  }
  th, tr {
      text-align : center;
  }
  </code></pre>
  
  <p>If my table has a lot of rows, then the content goes beyond the page and a scrollbar appears.. but this is what happens to the scrollbar :</p>
  
  <p><img src="https://i.stack.imgur.com/qn5HO.png" alt="Error image"></p>
  
  <p>I understand the since I have absolutely positioned the elements and added a <code>top</code> to it so the vertical scrollbar has shifted by that amount.</p>
  
  <p><strong>I'd like one of 2 solutions :</strong></p>
  
  <ol>
  <li>The scrollbar comes to the content element</li>
  <li>Scrollbar comes to the table body.</li>
  </ol>
  
  <p>I can achieve the second by adding a <code>display : block</code> to <code>tbody</code> but then it screws up the alignment very badly. Observe:</p>
  
  <p><img src="https://i.stack.imgur.com/Pr0Vn.png" alt="Blown up table"></p>