title: How do I keep a Material-UI Table scrollable with a dynamic height?
body: <p>I have a problem with a Material-UI Table component and its size and scrollability.</p>
  <h2><em>Short:</em></h2>
  <p>The Material-UI table component becomes only scrollable, if its parent has a fixed size. If I set the size to fit the parent 100%, it overflows.</p>
  <h2><em>Long:</em></h2>
  <p>I have a simple WebApp in Reactjs that consists of a header, a body (where the table lives) and a footer. My App component is styled to distribute those three base layout components as follows:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    root: {
      height: &quot;100vh&quot;,
      maxHeight: &quot;100vh&quot;,
      display: &quot;grid&quot;,
      gridTemplateRows: &quot;auto 1fr auto&quot;,
    },
  }));
  </code></pre>
  <p>That works just fine. My body component takes up all the available space to fill the full viewport. The component looks as follows:</p>
  <pre><code>&lt;div className={classes.root}&gt;
     &lt;Controls /&gt; //just some buttons, arranged in one line
     &lt;Table /&gt; //my table component, which uses pagination
  &lt;/div&gt;
  </code></pre>
  <p>The table itself uses pagination and mounts with a default of 10 rows per page.</p>
  <p>And the CSS for it looks like that:</p>
  <pre><code>root: {
      maxHeight: &quot;100%&quot;,
      display: &quot;grid&quot;,
      gridTemplateRows: &quot;min-content 1fr&quot;,
      gap: &quot;25px&quot;,
    },
  </code></pre>
  <p>The table component itself looks like this:</p>
  <pre><code>&lt;div className={classes.root}&gt;
        {loading ? loadingAlert : &lt;&gt;&lt;/&gt;}
        &lt;Paper elevation={3} className={classes.tableRoot}&gt;
          &lt;TableContainer className={classes.container}&gt;
            &lt;Table size=&quot;small&quot; stickyHeader aria-label=&quot;sticky table&quot;&gt;
   [...]
  </code></pre>
  <p>The CSS for my Table component looks like that:</p>
  <pre><code>const useStyles = makeStyles({
    root: {
      maxHeight: &quot;100%&quot;,
    },
    tableRoot: {
      width: &quot;100%&quot;,
      maxHeight: &quot;100%&quot;,
    },
    container: {
      maxHeight: &quot;100%&quot;, &lt;---
    },
    footer: {
      display: &quot;grid&quot;,
      gridTemplateColumns: &quot;1fr min-content&quot;,
    },
  });
  </code></pre>
  <p>When the user changes the displayed rows per page from 10 to 25, the height of the table changes. In that case, I want the table to take up all the free space within <code>body</code> and become scrollable. If I set the maxHeight of container to a fixed pixel-value, the table becomes scrollable and won't overflow. If I leave it like that, the table overflows and user has to scroll to reach the end of the page.</p>
  <p>Can anyone tell me how I can set the height for my container to fit its parent 100% without my table overflowing?</p>