<video>元素布局异常求助：宽≥1839px时溢出并出现垂直滚动

问题分析 #

当页面宽度≥1839px时，video容器布局错位，整体内容超出.App的100vh高度，触发垂直滚动条。核心原因是大宽度下视频元素的尺寸未被容器有效约束，加上容器布局规则未明确高度分配逻辑，导致内容撑破视口。

具体修复方案 #

修改以下CSS规则，确保所有内容严格适配100vh容器：

1. 调整.App容器的布局基础：

.App {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

2. 重构.video-container的高度约束，让它自动填充剩余空间：

.video-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

3. 约束视频元素的最大尺寸，避免撑破容器：

.video-container video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

4. 固定按钮区域的高度逻辑，避免挤压或溢出：

.button-container {
  padding: 1rem;
  box-sizing: border-box;
  height: auto;
}

原理说明 #

• flex:1让视频容器自动分配.App中除按钮外的所有剩余高度，确保两部分总高度刚好等于100vh。
• object-fit: contain保证视频在大宽度下按比例缩放，不会因宽度过大导致高度超出容器。
• box-sizing: border-box确保内边距不会额外增加容器总高度，从根源避免溢出。

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