CSS Make Div Expand to Fill Parent but not Overflow-CodePudding

I am working on a project which requires some basic HTML/CSS. I have a code pen which may be easier to visualize: https://codepen.io/Sean713/pen/yLEZVEe

My objective is to make the innerBottomHalf element expand to fully fill the bottomHalf element (barring any padding). I would also like the navbar wholePage element to take up the full VH.

I currently have it set so that the wholePage takes up the full VH, I'm not sure how to subtract the navbar height from this.

I also see that my innerBottomHalf expands outside of my BottomHalf, I do not know why this is, because I've set its height to be 100%.

I tried a lot of solutions online, the GPT chatbot, and prodding around with the code, but have been unable to figure it out. I appreciate any help.

My code is as follows:

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}

li a {
  display: block;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

div {
  padding: 10px;
}

.wholePage {
  background-color: blue;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topHalf {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}

.bottomHalf {
  background-color: grey;
  height: 100%;
}

.innerBottomHalf {
  background-color: brown;
  height: 100%;
}

.topLeftHalf {
  background-color: green;
  flex: 1;
  height: 50vh;
}

.topRightHalf {
  background-color: orange;
  flex: 1;
  height: 50vh;
}

<ul>
  <li><a>Solve</a></li>
  <li><a>About</a></li>
  <li><a>Other</a></li>
</ul>

<div >
  <div >
    <div >
      This is the top left
    </div>
    <div >
      This is the top right
    </div>
  </div>

  <div >
    This is the bottom half
    <div >
      This is the inner bottom half
    </div>
  </div>

</div>

CodePudding user response：

With height: 100% on nested elements you'll get an overflow because there are heights from other elements being added. Instead of percentage heights, just use flex properties all the way.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;  /* remove default margins */
}

.wholePage {
  background-color: blue;
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
  flex: 1;  /* new */
}

.bottomHalf {
  background-color: grey;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.innerBottomHalf {
  background-color: brown;
  /* height: 100%; */
  flex: 1;
}

/* no adjustments below this line */

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}

li a {
  display: block;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

div {
  padding: 10px;
}

.topHalf {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}

.topLeftHalf {
  background-color: green;
  flex: 1;
  height: 50vh;
}

.topRightHalf {
  background-color: orange;
  flex: 1;
  height: 50vh;
}

<ul>
  <li><a>Solve</a></li>
  <li><a>About</a></li>
  <li><a>Other</a></li>
</ul>

<div >
  <div >
    <div >
      This is the top left
    </div>
    <div >
      This is the top right
    </div>
  </div>

  <div >
    This is the bottom half
    <div >
      This is the inner bottom half
    </div>
  </div>

</div>