子div撑满父级宽度 最大宽950px自适应出现横向滚动如何解决

问题原因 #

你遇到的横向滚动问题是三个配置缺失导致的：

• 没有统一设置border-box盒模型：默认content-box模式下，.container的总宽度 = 设定的width:100% + 左右128px padding + 左右2px边框，会直接溢出父容器宽度。
• 块级元素宽度设置冗余：.container作为块级元素默认会占满父元素可用宽度，手动加width:100%反而会在盒模型异常时触发溢出。
• 边距配置不全：你只给.wrapper加了右外边距，没有处理左外边距，再加上浏览器默认给body加的8px外边距，会额外撑出横向空间。

修正后的代码 #

/* 全局统一盒模型、清除浏览器默认边距，属于前端项目通用基础配置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 950px;
  /* 宽屏时容器居中、左右各留32px边距，不需要居中就删掉auto，改成 margin: 0 32px 0 0 即可 */
  margin: 0 auto;
  padding: 0 32px;
}

.container {
  background-color: teal;
  padding: 48px 64px;
  border: 1px solid grey;
  /* 删掉冗余的width:100%，块级元素默认宽度auto就会自动适配父容器 */
  min-height: 414px;
}

<div class="wrapper">
  <div class="container"></div>  
</div>

效果说明 #

1. 视口宽度大于950px时，.wrapper固定为950px宽度，符合你要的最大宽度要求。
2. 视口宽度小于950px时，容器会自动收缩适配视口，不会出现横向滚动条。
3. 左右预留的32px边距可以避免容器贴到视口边缘，不需要可以直接删掉.wrapper的padding配置。

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