title: Always show height scrollbar within the viewport of the parent div
body: <p>I use React-Table as a table component. Within there, I'm basically presented with the following scenario: <a href="https://codesandbox.io/s/52lvxrj8r4" rel="nofollow noreferrer">https://codesandbox.io/s/52lvxrj8r4</a></p>
  
  <p>The vertical scrollbar of the body is doing its thing, however, it's outside of the viewport of the parent div, which does the horizontal scrolling. Meaning you only see the vertical scrollbar when you completely scroll the horizontal scrollbar to the right.</p>
  
  <p>My html is: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="rt-table"&gt;
     &lt;div class="rt-tbody"&gt;
        test
        &lt;br /&gt;
        test
        &lt;br /&gt;
        (repeat test&lt;br /&gt; many times)
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My SASS is:</p>
  
  <pre><code>.rt-table {
    width: 600px;
    height: 600px;
    overflow-y: hidden;
    .rt-tbody {
      height: 1000px;
      width: 1000px;
      overflow-x: auto;
      overflow-y: scroll;
    }
  }
  </code></pre>
  
  <p>Is there a possibility to make sure that the vertical scrollbar is always shown within the viewport of its parent, regardless of the position of the horizontal scrollbar?</p>