Html 如何实现flexLayout Div在Angular中占据100%的父容器?

Html 如何实现flexLayout Div在Angular中占据100%的父容器?,html,css,angular,flexbox,angular-flex-layout,Html,Css,Angular,Flexbox,Angular Flex Layout,我正在开发一个AngularFlexLayout应用程序,我正在尝试使用AngularFlexLayout实现一个响应性布局,但是我在容器高度方面遇到了一些问题 我已经附上了一张照片,我希望它看起来像什么,但目前,在桌面上,它并没有占据整个高度 下面是我正在使用的代码 任何帮助都将不胜感激。我希望清楚我在找什么 HS {{id} {{item.text}大写} {{item.text} {{item.text}大写} {{item.text} {{item.text}小写} {{item.

我正在开发一个AngularFlexLayout应用程序,我正在尝试使用AngularFlexLayout实现一个响应性布局,但是我在容器高度方面遇到了一些问题

我已经附上了一张照片,我希望它看起来像什么,但目前,在桌面上,它并没有占据整个高度

下面是我正在使用的代码

任何帮助都将不胜感激。我希望清楚我在找什么

HS


{{id}

{{item.text}大写}

{{item.text}

{{item.text}大写}

{{item.text}

{{item.text}小写}

{{item.text}大写}

{{item.text}

{{button.text} 关闭
<div class="container" fxLayout="column" >
<div class="segment" fxLayout="column" fxFill>
    <div fxLayout="row" fxLayoutAlign="end start" class="id" fxFlex="5">
        <p>{{ id }}</p>
    </div>
    <div class="" fxFlex="80" fxFill>
        <div >
            <div *ngFor="let item of items">
                <div [ngSwitch]="p.type">
                    <div *ngSwitchCase="'case1'" >
                        <p>{{ item.text | uppercase }}</p>
                    </div>

                    <div *ngSwitchCase="'case2'" class=>
                        <p>{{ item.text }}</p>
                    </div>

                    <div *ngSwitchCase="'case3'" >
                        <p>{{ item.text | uppercase }}</p>
                    </div>

                    <div *ngSwitchCase="'case4'" >
                        <p>{{ item.text }}</p>
                    </div>
                    <div *ngSwitchCase="'case5'" >
                        <p>{{ item.text | lowercase }}</p>
                    </div>
                    <div *ngSwitchCase="'case6'" >
                        <p>{{ item.text | uppercase }}</p>
                    </div>
                    <div *ngSwitchCase="'case7'" >
                        <p>{{ item.text }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="buttons" fxLayout="row" fxLayoutAlign="space-evenly center">
        <div *ngFor="let button of buttons">
            <button
                mat-stroked-button
                
            >
                {{ button.text }}
            </button>
        </div>

        <div class="default--button" fxLayout="row" fxLayoutAlign="space-between center">
            <div *ngIf="isTypeButton">
                <button mat-stroked-button >
                    <mat-icon>close</mat-icon>
                </button>
            </div>
        </div>
    </div>
</div>