Flexbox Sizing Question - Body is Overflowing 100VH

I am working on styling an app.

I want the app to have 2 components to it which should vertically flex within the body. The first is a navbar at the top. The second is the rest of my page, .wholePage.

.wholePage itself is a flexbox that should vertically flex two more items, .topHalf and .bottomHalf.

.topHalf should be a flexbox that horizontally flexes two components.

.bottomHalf should take up the remainder of the viewport, and scroll if there is too much content.

However, two things are unexpectedly happening. The first is that when I add the CSS selector:

div {
  padding: 10px;
}

My page no longer fits within the viewport, even though I have defined the body to have height: 100vh;, why is this?

Secondly, when I add content inside .topRightHalf, such as <p>hello</p>, the flexbox vertically grows! I do not know why this is as both my .topHalf and .bottomHalf have flex: 1; set, so I thought they should share the height of their parent.

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

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

body {
  margin: 0;
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

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

.topHalf {
  border: 1px solid green;
  flex: 1;
  display: flex;
}

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

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

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

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

<div class="wholePage">

  <div class="topHalf">
    <div class="topLeftHalf">
      This is the top left half
    </div>
    <div开发者_如何学JAVA class="topRightHalf">
      This is the top right 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>

My code is below, I have also included a codepen link: https://codepen.io/Sean713/pen/NWzovQO?editors=1100

You don't have an overflow. The horizontal scrollbar is visible because of:

.bottomHalf {
  overflow: scroll;
}

overflow: scroll always shows the scrollbar even if there's no overflow. You should use overflow-y instead to only show the vertical scrollbar.

I also recommend you to use grid instead of flex:

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: grey;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto auto;
}

nav, 
#BottomHalf {
  grid-column: span 2;
}

menu {
  list-style-type: none;
  display: flex;
  align-items: center;
  border: 1px dotted black;
  margin: 0;
  box-sizing: border-box;
}

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

#TopLeftHalf {
  border: 1px dotted red;
}

#TopRightHalf {
  border: 1px dotted brown;
}

#BottomHalf {
  overflow-y: scroll;
}

<nav>
  <menu>
    <li><a>Solve</a></li>
    <li><a>About</a></li>
    <li><a>Other</a></li>
  </menu>
</nav>

<!--Top Half-->
<section id="TopLeftHalf">This is the top left half</section>
<section id="TopRightHalf">This is the top right half</section>

<!--Bottom Half-->
<section id="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>
</section>