Html 角垫选项卡布局-顶部子项具有动态高度，底部子项具有固定高度

我正在寻找在angular mat选项卡中实现以下布局的方法：

到目前为止，我设法在底部实现了固定大小的区域，但不知道如何使动态高度区域向下延伸，直到固定大小区域

当前结果为（两幅图像中的总高度均为100%）：

HTML:

尝试将

display:flex

和

flex direction:column

添加到

mat选项卡组

，然后在

#dynamic_容器

内设置

flex:1

，但结果相同

我怎么修理它

<div class="main_container">
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms">
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">

        <div id="dynamic_container">Dynamic area</div>
        <div id="fixed_container">Fixed area</div>

    </mat-tab>
</mat-tab-group>

.main_container {
    height: 100%;
    padding-left: 10px;
}

mat-tab-group {
    min-height: 100vh;
    background-color: lightblue;
}

#dynamic_container {
    height: 100%;
    width: 100%;
    background-color: orange;
}

#fixed_container {
    position: fixed;
    bottom: 0;
    height: 300px;
    width: 100%;
    background-color: green;
}