0

I have angular app where I am using mat-tabs, I need to make inner element to occupy the entire available space.

<mat-tab-group dynamicHeight="true">
  <mat-tab label="Test Tab 1">
    <mat-tab-group dynamicHeight="true">
      <mat-tab label="Test Child Tab 1">
          <div class="h-full bg-yellow-400 text-center align-middle"> Split Container </div>
      </mat-tab>
      <mat-tab label="Test Child Tab 2"></mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Test Tab 2">
  </mat-tab>
</mat-tab-group>

I tried solution suggested in here However it did not work. I am not using material layout. here is the link to stackblitz that shows the issue. I forked it out from aforementioned stackoveflow question and removed layout usage.

Any tips are appreciated.

Tech Wizard
  • 403
  • 2
  • 7
  • 22

1 Answers1

0
<mat-tab-group mat-stretch-tabs>
 <mat-tab label="One"> One </mat-tab>
 <mat-tab label="Two"> Two </mat-tab>
</mat-tab-group>
Sriharish S
  • 11
  • 2