title: Scrollable tbody inside grid layout
body: <p>I have a simple 3-part layout (header/sidebar/content) using css grid.  Inside my content, I have a table.</p>
  
  <p>I want the table to fill the remaining space in the <code>div.content</code> and have a <code>tbody</code> with its own scrollbar.</p>
  
  <p>Every combination of <code>overflow-y: scroll;</code> and <code>position: relative</code> with various
  widths/heights results in either the <code>div.content</code> getting the scrollbar, or the <code>&lt;table&gt;</code> overflowing (see example - also on <a href="https://jsbin.com/heyisuyafi/edit?html,css,output" rel="nofollow noreferrer">jsbin</a>).</p>
  
  <p>How can I make this tables <code>&lt;tbody&gt;</code> receive the scrollbar, and have the table itself bounded by the content div without overflowing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    height: 100%;
  }
  
  main {
    display: grid;
    grid-template-areas: 'header header' 'sidebar content';
    grid-template-rows: 100px 1fr;
    grid-template-columns: 200px 1fr;
    width: 100%;
    height: 100%;
  }
  
  
  header {
    background-color: #CCC;
    grid-area: header;
    padding: 20px;
  }
  aside {
    background-color: #EEE;
    grid-area: sidebar;
    padding: 10px;
  }
  aside img {
    width: 100%;
    mix-blend-mode: darken;
  }
  div.content {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-area: content;
    min-height: 0;
    min-width: 0;
    padding: 10px;
    max-height: 100%;
    border-bottom: 2px solid black;
    overflow-y: scroll;
  }
  
  table {
    margin: 10px;
    width: 100%;
  }
  thead {
    text-align: left;
  }
  tbody {
    height: 100%;
    overflow-y: scroll;
  }
  
  .code {
    font: 12px Courier;
    color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
        &lt;header&gt;
          &lt;h2&gt;Really rad app title&lt;/h2&gt;
        &lt;/header&gt;
        &lt;aside&gt;
          &lt;img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" /&gt;
          &lt;span&gt;Some Contextual Informations and other such sidebar-y things&lt;span&gt;
        &lt;/aside&gt;
        &lt;div class="content"&gt;
          &lt;h3&gt;Some Stuffs&lt;/h3&gt;
          &lt;div&gt;
            Why does this &lt;span class="code"&gt;&amp;lt;tbody&amp;gt;&lt;/span&gt; ignore my &lt;span class="code"&gt;overflow-y: scroll;&lt;/span&gt;?
            &lt;br /&gt;&lt;br /&gt;
            I want &lt;span class="code"&gt;div.content&lt;/span&gt; to act as a portal/window, with everything around it remaining fixed; but I want the table to stop before the bottom of this window and have a scrollable body (instead of scrolling this text offscreen).
          &lt;/div&gt;
        
          &lt;table&gt;
            &lt;thead&gt;&lt;tr&gt;&lt;th&gt;One&lt;/th&gt;&lt;th&gt;Two&lt;/th&gt;&lt;th&gt;Three&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
            &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Some content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;td&gt;Too much content&lt;/td&gt;&lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>