我正在使用 Angular 和 Flex 開發側邊欄。它是以下布局 Angular 組件中的應用程序側邊欄：<div fxlayout="row" fxFill>    <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar>    <div fxLayout="column" fxFlex="100">        <app-top-navbar class="navbar-component" fxLayout="column"></app-top-navbar>        <div class="content" fxLayout="column" fxFlex>            <router-outlet></router-outlet>        </div>    </div></div>我試圖讓側邊欄垂直填充頁面，列表項在該區域之間均勻分布。但我沒有任何運氣......我在這個JSFiddle中制作了一個簡化版本。您可以看到它水平拉伸（很好，因為我希望它填充更大布局的 10%），但它不會到達頁面底部。我是 Angular 和 Flex 的新手，因此我們將不勝感激。這是小提琴代碼（如果有區別，則使用錨點，因為我也有未包含的圖標）：:host {    display: flex;    flex-direction: column;    flex: 1 1 100%;}#sidebar-cont-div{    display: flex;    flex:1;    flex-direction: column;}#navbar-content-container{    display: flex;    flex: 1;    flex-direction: column;} #main-navbar {    background-color: red;    border-radius: 50px 20px 20px 50px;    text-align:center;}#nav-list {    padding: 0;    list-style: none;    display: flex;    flex-direction: column;    justify-content: space-around;    flex: 1;    margin: auto;    min-width:100%;    height:100%;}<div id = "sidebar-cont-div">    <nav id="main-navbar">        <div id="navbar-content-container">                <a href="#">                    <h1 id="sidebar-logo">Project<br>Dash</h1>                </a>            <ul id="nav-list">                <li class="sidebar-item" role="presentation">                    <a href="#">                        <span>Overview</span>                    </a>                </li>                <li class="sidebar-item" role="presentation">                    <a href="#">                        <span>Project Record</span>                    </a>                </li>            </ul>        </div>    </nav></div>