How to expand Angular Material Tab to show Angular Grid data?

Question

I am using Angular 8 and want to show Angular Grid inside Angular Material Tab in following manner:-

<mat-tab-group>
        <mat-tab label="Request Flow">
            <div class="div-main">
                <ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
                    [gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
                    [getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)">
                </ag-grid-angular>
                <br />                
                <button class="button-internal">Add Subrequest</button>
            </div>
        </mat-tab>
    </mat-tab-group>

The issue is that even if data present in Angular Grid then also Angular Material Tab is not expanding to make Angular Grid visible. It is showing like below:-

However when I put Angular Grid outside Angular Material Tab then the grid is showing its full data.

I tried to use "dynamicHeight" property of "mat-tab-group" but it is of no use.

Please help here.

Answer 1

Below steps worked for me:-

1. Added [dynamicHeight] = "true" to mat-tab-group.

2. Added following CSS:-

   .mat-tab-group{ height: 100%; }.mat-tab-body-wrapper { flex-grow: 1; }

   .mat-tab-body { display: flex;important: flex-direction; column; }

Answer 2

This worked for me:

::ng-deep.mat-tab-body-wrapper { 
    flex-grow: 1; 
}

you have to override mat-tab-body-wrapper style with::ng-deep