1
.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>

My nested div, main-child as a height of 100%, however it will not fill the parent div (which is inside of a flex box, and was sized with flex-grow). I want the child to expand to the fill size of it's parent.

How can I get around this?

JSFiddle

Tyler
  • 1,163
  • 16
  • 37

1 Answers1

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

.main-child {
  flex: 1;
  width: 100%;
  background-color: yellow;
}
michael
  • 4,053
  • 2
  • 12
  • 31
  • 3
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Donald Duck Nov 26 '20 at 20:37