Flex：1 不垂直填充角度布局 div

Question

我正在使用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的新手，所以任何帮助都将不胜感激。这是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;
}

你可以按原样使用其余的样式。通过使用侧导航上方的样式，你的侧导航将垂直展开。

堆叠的工作样品https://stackblitz.com/edit/js-aqedvi