Scroll Bar inside mat-tab content with Grid layout

Question

I am using CSS grid layout and using mat-tab controls to display some data. However I am unable to get the scroll bar to come up inside the tab content, for the tab content alone without changing it to a fixed height. Help.

:host {
  height: 100%;
  overflow: hidden;
}

Content:

grid: "top"2fr "bottom"1fr / 1fr;
overflow: hidden;

Bottm:

 .bottom {
        grid-area: bottom;
        display: grid;
        grid: 1fr / 1fr;
        overflow: hidden;
       .tabdata
         {
            overflow:auto;
         }
}

In the bottom section, I need to have a tab group with tabs and dynamic content in it.

<grid class="bottom">
<mat-tab-group selectedIndex="0">
   <mat-tab>
    <div class="tabdata">
        Large dynamic data that needs scrolling
    </div>
   </mat-tab>
</mat-tab-group
</grid>