如何实现DIV内部元素水平滚动且不触发页面整体滚动

• .contained 配置错误：display: inline 使容器变为行内元素，无法主动设置宽度、也无法正确触发内部溢出滚动规则；同时原有代码中width 100%存在语法错误，缺少属性分隔冒号。
• 子元素布局逻辑错误：.card使用float: left浮动布局，父容器宽度不足时浮动元素会自动换行，无法形成横向不换行的排列，自然无法触发水平滚动。
• 无效属性：.card 中的overflow: none为非法取值，overflow没有none可选值，需要隐藏溢出的话可改为overflow: hidden。

仅需要修改.contained和.card两个选择器的样式即可，完整修改后代码如下：

body {
  overflow-x: hidden;
  overflow-y: auto;
}

body .contained {
  overflow-x: auto;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 200px;
  flex-shrink: 0;
  text-align: center;
  border-radius: 25px;
  background-color: AliceBlue;
  border-style: solid;
  border-width: .5px;
  margin-right: 10px;
}

.title {
  color: grey;
  font-size: 18px;
}

h1 {
  background-color: PowderBlue;
  border-radius: 25px 25px 0px 0px;
  margin-top: 0px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.float-container {
  padding: 20px;
  background-color: White;
}

• display: flex + flex-wrap: nowrap：强制容器内子元素横向排列、不换行
• flex-shrink: 0：禁止弹性布局自动压缩子元素宽度，保证所有卡片保持200px固定宽度
• overflow-x: auto：仅当子元素总宽度超出容器宽度时才显示水平滚动条，相比scroll不会默认展示无效滚动条
• 外层非.contained容器内的卡片布局不受影响，仍保持原有堆叠规则

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