Flex：1 不垂直填充 Angular 布局 Div

Question

我正在使用 Angular 和 Flex 制作侧边栏。它是以下布局 Angular 组件中的 app-sidebar：

<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 的新手，因此我们将不胜感激。这是 Fiddle 代码（如果有区别，则使用锚点，因为我也没有包含图标）：

: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>

Answer 1

please try like this 

body , html {
  height:100% ;
  margin : 0px ;
}

#sidebar-cont-div{
  display: flex;
  flex-direction: column;
  height:100%
}

#main-navbar {
    background-color: #ffffff;
    background-image: linear-gradient(180deg,rgba(127,162,137,0.82) 20%,rgba(39,86,94,0.92));
    border-radius: 50px 20px 20px 50px;
    text-align:center;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

您可以按原样使用其余样式。使用侧面导航上方的样式将垂直拉伸。

stackblitz 中的工作示例 https://stackblitz.com/edit/js-aqedvi