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 {&nbsp; flex-grow: 1;&nbsp; background-color: red;&nbsp; display: flex;}.main-child {&nbsp; flex: 1;&nbsp; width: 100%;&nbsp; background-color: yellow;}