mat-tab is not setting full height in Angular-CodePudding

I am using mat-tab but it is not taking the full height and it leaves margin at the bottom.

HTML:

  <div >
            <horizontal-tab-group
                [tabs]="tabs"
                dataAutomation="TAB-GROUP"
                [selectedIndex]="selectedTabIndex"
                (selectedTabIndexChanged)="setActiveTab($event)"
            ></horizontal-tab-group>
            <ng-template #allTemplate dataAutomation="Count AllTemplate">
                <count-all></count-all>
            </ng-template>
            <ng-template #sumTemplate dataAutomation="Count Sum Template">
                <count-sum> </count-sum>
            </ng-template>
   </div>

CSS:

.left-wrapper {
                flex-basis: 44%;
                display: flex;
                flex-direction: column;
                height: 37rem;
            }

How can I solve this issue?

CodePudding user response：

It can be solve by changing css, as below:

.left-wrapper {
                flex-basis: 44%;
                display: flex;
                flex-direction: column;
                height: 37rem;

                ::ng-deep .mat-tab-body-wrapper {
                    height: 37rem;
                }

                ::ng-deep .mat-tab-body.mat-tab-body-active {
                    height: 37rem;
                }
            }