移动端Flexbox容器下方出现神秘空白的原因及解决方法

问题原因 #

这个空白是由于移动端/触摸模式下视口单位vh的计算逻辑差异导致的：

• 当flex容器的子项总宽度（两个600px+gap）超过视口宽度时，页面产生水平溢出。
• 在触摸模拟/移动端浏览器中，浏览器会扩展视口宽度以容纳超出内容，但100vh基于初始视口高度计算，扩展后的视口垂直空间未同步更新，导致容器下方出现空白。
• 同时flex容器未限制宽度，被子项撑开至超出视口宽度，浏览器滚动区域计算出现偏差，进一步加剧了垂直空白问题。

解决方案 #

方案1：用动态视口高度单位dvh替代vh #

dvh（Dynamic Viewport Height）会根据当前实际显示的视口高度动态计算，能避免传统vh在溢出场景下的计算偏差：

#container {
  display: flex;
  gap: 1em;
  min-height: 100dvh; /* 替换100vh为100dvh */
}

.item {
  background-color: lightgrey;
  flex-shrink: 0;
  width: 600px;
}

方案2：为容器设置width: fit-content #

让容器宽度自适应子项总宽度，修正浏览器滚动区域计算逻辑：

#container {
  display: flex;
  gap: 1em;
  min-height: 100vh;
  width: fit-content; /* 新增此属性 */
}

.item {
  background-color: lightgrey;
  flex-shrink: 0;
  width: 600px;
}

方案3：添加移动端视口元标签（若未配置） #

如果页面未设置视口元标签，添加后能让浏览器正确计算视口尺寸：
在HTML的<head>中插入：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

验证说明 #

• 方案1兼容性：现代移动端Chrome、Firefox均已支持dvh，需兼容旧版浏览器可搭配方案2使用。
• 方案2不会产生水平滚动条，同时能彻底消除下方空白，符合需求。

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