我正在设计一个应用程序。
我希望这个应用程序有两个组件，它们应该在主体内垂直伸缩。第一个是顶部的导航栏。第二个是页面的其余部分，.wholePage。
.wholePage本身是一个灵活框，它应该垂直地调整另外两个项.topHalf和.bottomHalf。
.topHalf应该是水平弯曲两个组件的flexbox。
.bottomHalf应占据视口的其余部分，如果内容太多，则进行滚动。
但是，有两件事出乎意料地发生了。第一件事是，当我添加CSS选择器时：

div {
  padding: 10px;
}

我的页面不再适合视口，即使我已经定义了具有height: 100vh;的主体，为什么会这样？
其次，当我在.topRightHalf中添加内容时，比如<p>hello</p>，flexbox会垂直增长！我不知道为什么，因为我的.topHalf和.bottomHalf都设置了flex: 1;，所以我认为它们应该共享它们的父级的高度。
第一次
我的代码如下，我还包括一个codepen链接：https://codepen.io/Sean713/pen/NWzovQO?editors=1100