html – Flexbox Sizing Query – Physique is Overflowing 100VH

I’m engaged on styling an app.

I need the app to have 2 parts to it which ought to vertically flex throughout the physique. The primary is a navbar on the high. The second is the remainder of my web page, .wholePage.

.wholePage itself is a flexbox which ought to vertically flex two extra objects, .topHalf and .bottomHalf.

.topHalf needs to be a flexbox that horizontally flexes two parts.

.bottomHalf ought to take up the rest of the few port, and scroll if there may be an excessive amount of content material.

Nevertheless, two issues are unexpectedly occurring. The primary is that once I add the css selector:

div {
padding: 10px;
}

My web page now not suits throughout the viewport, although I’ve outlined the physique to have top: 100vh;, why is that this?

Secondly, once I add content material inside .topRightHalf, resembling <p>hey</p>, the flexbox vertically grows! I have no idea why that is as each my .topHalf and .bottomHalf have flex: 1; set, so I assumed they need to share the peak of their mum or dad.

Any assistance is appreciated.

My code is beneath, I’ve additionally included a codepen hyperlink: https://codepen.io/Sean713/pen/NWzovQO?editors=1100

 <ul>
   <li><a>Resolve</a></li>
   <li><a>About</a></li>
   <li><a>Different</a></li>
</ul>

<div class="wholePage">
  
  <div class="topHalf">
    <div class="topLeftHalf">
      That is the highest left half
    </div>
    <div class="topRightHalf">
      That is the highest proper half
    </div>
  </div>
  
  <div class="bottomHalf">
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
    <p>I can scroll</p>
  </div>
  
</div>

ul {
  list-style-type: none;
  show: flex;
  align-items: middle;
  border: 1px dotted black;
  margin: 0;
  box-sizing: border-box;
}

li a {
  show: block;
  text-align: middle;
  padding: 15px 15px;
  text-decoration: none;
}

physique {
  margin: 0;
  top: 100vh;
  background-color: gray;
  show: flex;
  flex-direction: column;
}

.wholePage {
  flex: 1;
  show: flex;
  flex-direction: column;
}

.topHalf {
  border: 1px stable inexperienced;
  flex: 1;
  show: flex;
}

.topLeftHalf {
  border: 1px dotted pink;
  flex: 1;
}

.topRightHalf {
  border: 1px dotted brown;
  flex: 1;
}

.bottomHalf {
  flex: 1;
  overflow: scroll;
}