能否实现不依赖body {overflow-x: hidden}的窄父容器+宽子容器布局？

所有实现全屏容器的常见方案都大同小异，且都依赖body {overflow-x: hidden}，但这其实算不上最佳实践。

你可以通过调整代码中.main {min-height}的值来验证问题：

• 当.main内容高度在视口范围内时，显示正常
• 当内容高度超出视口、出现垂直滚动条时，全屏容器的部分内容（比如文本）会被左侧遮挡，本质是滚动条导致宽度计算出现偏差

测试代码 #

CSS 代码

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 尝试移除这行看看效果 */
}

.main {
  width: 90%;
  margin: 0 auto;
  background: #eee;
  min-height: 3000px;
}

.inside {
  background: yellow;
  min-height: 300px;
}

.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.full-width2 {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.full-width3 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

HTML 代码

<div class="main">
  <div>调整 .main {min-height} 参数测试</div>
  <div>如果 .main 内容高度在视口范围内，显示正常</div>
  <div>如果 .main 内容高度超出视口，全屏容器会因滚动条导致宽度计算偏差</div>
  <div class="inside full-width3">全屏容器</div>
  全屏容器下方的更多内容
</div>

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