如何用纯HTML/CSS实现子元素完全包含父元素，超出隐藏且支持横向滚动？

要实现frame内的横向滚动效果，只需对现有代码做以下关键调整：

修改后的完整代码 #

CSS 代码

html, body {
  height: 100%;
  margin: 0;
  background: #f0f0f0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.frame {
  background: rgba(255, 255, 255, 0.25);
  width: 40%;
  height: 60%;
  margin: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  padding: 10px;
}

.frame .caroussel {
  background: rgba(0, 0, 0, 0.51);
  width: 300%;
  height: 100%;
}

HTML 代码

<div class="container">
  <div class="frame">
    <div class="caroussel"></div>
  </div>
  <div class="frame">
    <div class="caroussel"></div>
  </div>
</div>

关键改动说明 #

• 给html和body设置height: 100%，确保.frame的百分比高度能正常生效
• 给.frame添加overflow-x: auto，当内部内容宽度超出frame时自动显示横向滚动条；overflow-y: hidden可隐藏不必要的纵向滚动（按需调整）
• 用.frame的padding替代.caroussel的margin，避免margin导致横向滚动区域出现额外偏移
• 给.container添加height: 100%，让flex布局能实现frame的垂直居中

这样就能实现你需要的横向滚动效果，完全基于纯HTML/CSS实现，无需任何额外工具。

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