.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 調整大?。Ｎ蚁Ｍ蛹墧U展到其父級的填充大小。我該如何解決這個問題？JSFiddle