为何Chrome全屏显示出现滚动条扭曲CSS，DevTools虚拟视图却正常？

问题原因 #

• 核心矛盾来自vw单位的计算逻辑与垂直滚动条的空间占用：
  • 当元素高度超过视口高度时，浏览器会显示垂直滚动条，该滚动条会占用一部分水平空间，此时body的可用宽度 = 视口总宽度 - 滚动条宽度。
  • vw单位是基于**视口总宽度（未扣除滚动条占用的空间）**计算的，因此两个50vw元素的总宽度等于视口总宽度，超过了body的可用宽度，触发水平滚动条，同时浮动元素因空间不足换行堆叠。
• 降低元素高度到100px能解决的原因：此时元素高度未超过视口，不会出现垂直滚动条，body可用宽度等于视口总宽度，两个50vw刚好填满空间，自然不会溢出。
• 50%可以解决的原因：%单位是基于父元素（即body）的可用宽度计算的，两个50%的总宽度恰好等于body的可用宽度，完美适配滚动条占用空间后的布局。

可行解决方案 #

方案1：使用百分比宽度替代vw #

直接修改元素宽度单位，贴合现有代码结构：

#leftSect, #rightSect {
  width: 50%; /* 替换原50vw */
  margin: 0;
  padding: 0;
  height: 400px;
  float: left;
  border: 1px solid black;
  box-sizing: border-box;
}
#leftSect {
  background-color: red;
}
#rightSect {
  background-color: blue;
}

方案2：使用Flexbox布局（推荐） #

放弃浮动，改用现代布局方式，自动适配视口及滚动条变化：

body {
  margin: 0;
  padding: 0;
  display: flex;
}
#leftSect, #rightSect {
  margin: 0;
  padding: 0;
  flex: 1; /* 自动平分父容器空间 */
  height: 400px;
  border: 1px solid black;
  box-sizing: border-box;
}
#leftSect {
  background-color: red;
}
#rightSect {
  background-color: blue;
}

方案3：使用Grid布局 #

代码更简洁的现代布局方案：

body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列强制平分 */
}
#leftSect, #rightSect {
  margin: 0;
  padding: 0;
  height: 400px;
  border: 1px solid black;
  box-sizing: border-box;
}
#leftSect {
  background-color: red;
}
#rightSect {
  background-color: blue;
}

方案4：隐藏水平滚动条（应急用，不推荐） #

若必须保留vw单位，可单独隐藏水平滚动条，保留垂直滚动功能：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 仅隐藏水平滚动条 */
}

注意：此方案会截断水平方向超出的内容，若页面存在横向展示需求，不建议使用。

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