title: How to make mat-tab occupy entire available space
body: <p>I have angular app where I am using mat-tabs, I need to make inner element to occupy the entire available space.</p>
  <pre><code>&lt;mat-tab-group dynamicHeight=&quot;true&quot;&gt;
    &lt;mat-tab label=&quot;Test Tab 1&quot;&gt;
      &lt;mat-tab-group dynamicHeight=&quot;true&quot;&gt;
        &lt;mat-tab label=&quot;Test Child Tab 1&quot;&gt;
            &lt;div class=&quot;h-full bg-yellow-400 text-center align-middle&quot;&gt; Split Container &lt;/div&gt;
        &lt;/mat-tab&gt;
        &lt;mat-tab label=&quot;Test Child Tab 2&quot;&gt;&lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;
    &lt;/mat-tab&gt;
    &lt;mat-tab label=&quot;Test Tab 2&quot;&gt;
    &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  <p>I tried solution suggested in <a href="https://stackoverflow.com/questions/50722183/angular-material-tab-height">here</a> However it did not work.
  I am not using material layout. here is the <a href="https://stackblitz.com/edit/angular-uf6lmz?file=src%2Fapp%2Ftall.component.html" rel="nofollow noreferrer">link</a> to stackblitz that shows the issue. I forked it out from aforementioned stackoveflow question and removed layout usage.</p>
  <p>Any tips are appreciated.</p>