Flex: 1 не заполняет Angular Layout 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% большей разметки), но это не go в нижней части страницы.

Я новичок в 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