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&nbsp;body , html {&nbsp; height:100% ;&nbsp; margin : 0px ;}#sidebar-cont-div{&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height:100%}#main-navbar {&nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; background-image: linear-gradient(180deg,rgba(127,162,137,0.82) 20%,rgba(39,86,94,0.92));&nbsp; &nbsp; border-radius: 50px 20px 20px 50px;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; flex: 1 1 auto;}您可以按原样使用其余样式。通过使用侧面导航上方的样式，您的侧面导航将垂直拉伸。stackblitz 中的工作示例&nbsp;https://stackblitz.com/edit/js-aqedvi