FlexBox - 当高度为 100% 时，嵌套 div 不会填充它的父级 [重复]

Question

.container {
  height: 100vh;
  width: 500px;
  border: 1px solid black;
}

.layout {
  display: flex;
  min-height: 100%;
  background-color: blue;
  flex-direction: column;
}

.header {
  height: 50px;
  background-color: orange;
}

.main {
  flex-grow: 1;
  background-color: red;
}

.main-child {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

.footer {
  justify-self: flex-end;
  background-color: purple;
}

<div class="container">
  <div class="layout">
    <header class="header">
      <input/>
    </header>
    <main class="main">
      <div class="main-child">
        <p>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
        </p>
        <p>
        My Question, why isn't the yellow part the full size of the red part?
        </p>
      </div>
    </main>
    <footer class="footer">
      <p>
        Texty texty text
      </p>
    </footer>
  </div>
</div>

我的嵌套 div，main-child 的高度为 100%，但它不会填充父 div（它位于 flex 框内，并使用 flex-grow 调整大小）。我希望孩子扩大到其父母的填充大小。

我该如何解决这个问题？

JSFiddle

Answer 1

.main {
  flex-grow: 1;
  background-color: red;
  display: flex;
}

.main-child {
  flex: 1;
  width: 100%;
  background-color: yellow;
}