Flexbox布局尺寸问题：设置100VH的Body出现溢出

问题1：全局padding导致页面超出视口 #

给所有div添加padding:10px后，即便body设置了height:100vh，页面仍出现垂直滚动条。这是因为浏览器默认的box-sizing: content-box会把padding算在元素宽高之外，导致子元素总高度超过视口；再加上body自带默认margin，进一步挤占了视口空间。

解决方法：
给所有元素统一设置box-sizing: border-box，让padding包含在元素宽高计算内，同时清除body的默认margin：

* {
  box-sizing: border-box;
  margin: 0;
}

问题2：.topHalf被内容拉伸，无法与.bottomHalf均分高度 #

虽然给.topHalf和.bottomHalf都设置了flex:1，但添加内容后.topHalf会被垂直拉伸，打破均分规则。原因是flex容器在column方向下，子元素默认min-height: auto，当内容高度超过分配空间时，会优先满足内容高度，忽略flex-grow的均分逻辑；另外需要确保.wholePage能占满导航栏之外的剩余视口空间。

解决方法：

1. 给.wholePage设置flex:1，让它填充body中导航栏下方的剩余空间（body需设置为display:flex; flex-direction:column;）
2. 给.topHalf设置flex:1 1 0%，强制它以0为基准尺寸进行拉伸，不受内容高度影响；或者保留flex:1并添加min-height:0
3. 给.bottomHalf设置overflow:auto，实现内容过多时滚动

完整修正代码 #

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

nav {
  background: #eee;
  padding: 10px;
}

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

.topHalf {
  display: flex;
  flex: 1 1 0%;
  padding: 10px;
  gap: 10px;
}

.topLeftHalf, .topRightHalf {
  flex: 1;
  background: #ddd;
  padding: 10px;
}

.bottomHalf {
  flex: 1;
  padding: 10px;
  background: #ccc;
  overflow: auto;
}

内容的提问来源于stack exchange，提问作者713sean