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