Flex: 1 Doesn't Fill Angular Layout Div Vertically - html

Question

I'm working on a sidebar using Angular and Flex. It's app-sidebar within the following layout Angular component:
<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>
I'm trying to get the sidebar to fill the page vertically, the list items within evenly spaced between that expanse. But I'm not having any luck... I've made a simplified version in this JSFiddle. You can see that it stretches horizontally (great, as I want it to fill that 10% of the greater layout), but it doesn't go to the bottom of the page.
I'm new to Angular and Flex, so any help would be appreciated. Here's the Fiddle code (if it makes a difference, anchors are used, because I also have icons not included):
: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;
}
You can use the rest of the style as it is.By using the styles above your side nav will strech vertically.
working sample in stackblitz
https://stackblitz.com/edit/js-aqedvi