html - 如何设置高度 :100% on child of flex item that has flex-grow:1?

Question

为什么将 height:100% 设置为具有 flex-grow:1 的 flex 元素(也是 flex 容器)的子项不起作用符合预期吗？

为此子元素设置 height: 100% 应该使它采用其父元素(flex-grow:1 父元素)的高度，但事实并非如此我显然错了。 我想知道 height:100% 在此上下文中的含义。使用此设置，为什么元素不占据其父项的完整高度。

这是 HTML(需要 Bootstrap)

.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
    height: 100%;
}

.flex-content {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

.flex-grow-this {
    flex-grow: 1;
}

<div class="container-fluid flex-content">
    <header class="container-fluid theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid row flex-grow-this">
        <aside class="col-2 project-manager">
            sek
        </aside>
        <section class="col-10 to-do-list">

        </section>
    </div>
</div><!--end of main div-->

Answer 1

清理代码可以解决一些问题，correctly using the Bootstrap grid . 布局应该只是container-fluid > row > columns。不要使用嵌套容器。您不需要额外的 CSS 来设置 flexbox 和高度。 Bootstrap 4 包括 Utility classes为此:

• flex-grow-1
• d-flex flex 列
• vh-100

只需为颜色/边框/填充添加 CSS...

.theHeader {
    background-color: #336B87;
    color: white;
    padding: 5px 15px;
}

.project-manager {
    border-right: 1px solid black;
}

那么 HTML 就是...

<div class="d-flex flex-column vh-100">
    <header class="theHeader">
        <h1 class="logo">ToDo Manager</h1>
    </header>
    <div class="container-fluid d-flex flex-column flex-grow-1">
        <div class="row flex-grow-1">
            <aside class="col-2 project-manager">
                aside
            </aside>
            <section class="col-10 to-do-list">

            </section>
        </div>
    </div>
</div>

注意:将 height:100% 添加到子级 col-2 实际上会阻止它填充父级的高度。只需确保父 row 是 flex-grow-1

演示:https://www.codeply.com/go/IHAHhF8qEa