css设置弹性flex后，如果设置100vh高度不撑满的原因

设置CSS弹性盒子（flexbox）时，如果元素的高度没有撑满视口的100vh（视口高度），可能是由以下原因造成的：

1. 父元素的高度没有被子元素撑满。
2. 子元素内部还有其他元素或者内边距（padding）/边框（border）/外边距（margin）导致高度超出预期。
3. 存在默认的盒子模型盒子尺寸计算方式，可能与flexbox布局冲突。
4. 存在最小高度限制（min-height）或者最大高度限制（max-height）。
5. 视口单位100vh包含了滚动条的高度，如果有滚动条，可能导致100vh高度不准确。

解决方法：

1. 确保所有子元素总和不超过父元素的高度限制。
2. 检查子元素是否有额外的空间占据，并调整这些元素的高度或者使用flex-grow属性来分配额外空间。
3. 确保盒子模型计算正确，可以尝试设置box-sizing: border-box;使得边框和内边距不会导致元素尺寸溢出。
4. 检查并调整最小高度（min-height）和最大高度（max-height）属性。
5. 如果存在滚动条，可以使用calc(100vh - 滚动条高度)来调整高度，或者通过JavaScript动态计算视口高度并设置。

示例代码：

.container {
  display: flex; /* 设置弹性布局 */
  height: 100vh; /* 设置高度为视口高度 */
}
 
.child {
  flex: 1; /* 让子元素占据剩余空间 */
  box-sizing: border-box; /* 修正盒子模型 */
  /* 其他样式 */
}

确保父元素.container的高度被子元素.child撑满，并且子元素能够适当地分配父元素的高度。