如何在固定尺寸容器内实现子元素的水平滚动？

嘿，这个需求很常见，轻松就能搞定！你只需要给父容器（.banner）添加几个关键CSS属性，就能让子元素只在X轴方向滚动，完全不会触发整个文档的滚动。另外还要修正一下容器的盒模型，避免它因为padding超出页面宽度。

修改后的完整代码 #

CSS部分 #

.banner {
  background-color: blue;
  width: 100%;
  height: 300px;
  padding: 20px;
  /* 核心：开启X轴滚动，隐藏Y轴滚动 */
  overflow-x: auto;
  overflow-y: hidden;
  /* 修正盒模型：让padding包含在width内，防止容器溢出页面 */
  box-sizing: border-box;
  /* 可选优化：让滚动条更美观（非必需） */
  scrollbar-width: thin;
}

.content {
  background-color: red;
  border-radius: 25px;
  width: 200%;
  height: 100%;
}

HTML部分（无需修改） #

<div class="banner">
  <div class="content">
  </div>
</div>

关键属性说明 #

• overflow-x: auto：当子元素宽度超过容器时，自动显示水平滚动条；如果子元素宽度没超出，就不会显示。要是你想始终显示滚动条，可以换成overflow-x: scroll。
• overflow-y: hidden：强制隐藏垂直方向的滚动条，避免容器内的内容意外触发垂直滚动。
• box-sizing: border-box：这步很重要！它让容器的width:100%包含padding值，不然原来的设置会让容器总宽度变成100% + 40px（左右padding各20px），导致整个文档出现不必要的横向滚动。

这样设置后，只有.banner容器内会出现水平滚动条，拖动它只会滚动内部的.content元素，整个页面完全不会跟着动哦～

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