Bootstrap 4 установленной высоты: 100%;дочернему элементу flex, который имеет flex-grow: 1

Question

Зачем устанавливать высоту: 100%;потомку элемента flex (который также является контейнером flex), который имеет flex-grow: 1;не работает, как ожидалось?Высота установки: 100%;этому дочернему элементу нужно, чтобы он принимал высоту своего родителя (flex-grow: 1; parent), но это не так, я явно ошибаюсь.Я хочу знать, какой рост: 100%;означает в этом контексте, почему элемент не принимает полную высоту своего родителя с этим параметром.

Это HTML (необходим загрузчик)

.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

Вы не установили поля и отступы тела на ноль, поэтому они оставляют пространство сверху.Смотрите фрагмент.

body {
  padding:0;
  margin:0;
}
.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 2

Есть несколько проблем, которые решаются путем очистки кода, и правильно с использованием сетки Bootstrap .Макет должен быть просто container-fluid> row> columns.Не используйте вложенные контейнеры.Вам не нужен дополнительный CSS для flexbox и высоты.Bootstrap 4 включает в себя служебные классы для этого:

• flex-grow-1
• d-flex flex-column
• 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

Answer 3

Попробуйте добавить класс h-100 к родительскому div

<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 h-100" >
        <aside class="col-2 project-manager">
                    sek
                </aside>
        <section class="col-10 to-do-list">
asd
                </section>
      </div>
    </div>

Это то, что вы ожидаете?