如何实现动态数量div横向溢出滚动且无需使用JavaScript

你只需要对.parent容器添加flex布局相关属性即可实现需求，完全不需要JavaScript，也不会产生额外的空白区域。

完整修改后的CSS代码 #

.parent {
  /* 核心布局属性 */
  display: flex;
  flex-wrap: nowrap; /* 强制子元素不换行 */
  overflow-x: auto; /* 超出容器宽度时触发横向滚动 */
  /* 可选：优化滚动体验 */
  scroll-behavior: smooth;
  /* 可选：避免子元素左右margin贴边，可按需调整 */
  padding: 0 16px;
}
.parent div{
  background: #fff;
  padding: 1rem;
  text-align: center;
  width: 200px;
  border-radius: 5px;
  margin: 16px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.1);
  /* 核心属性：禁止子元素被压缩，保持固定宽度 */
  flex-shrink: 0;
}

实现原理 #

• display: flex + flex-wrap: nowrap 让所有子元素强制在同一行排列，不会自动换行
• flex-shrink: 0 禁止子元素自动收缩，保证每个子元素都维持设定的200px宽度
• overflow-x: auto 只有当子元素总宽度超出父容器宽度时才会出现滚动条，滚动的最大范围刚好对齐最后一个子元素的位置，不会产生多余空白

可选优化：隐藏滚动条保留滚动功能 #

如果不需要显示滚动条，可以额外添加以下CSS：

/* Chrome、Safari等webkit内核浏览器 */
.parent::-webkit-scrollbar {
  display: none;
}
/* Firefox */
.parent {
  scrollbar-width: none;
}
/* IE、Edge */
.parent {
  -ms-overflow-style: none;
}

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