如何实现内部div横向堆叠的横向无限滚动容器？

为什么你的横向实现失败了 #

你用float: left的方式之所以没效果，核心原因是：父容器没有设置阻止子元素换行的规则，float元素在父容器宽度不足时会自动换行；同时父容器宽度固定为95vw，子元素总宽度远超父容器时，会被挤到下一行，无法形成连续的横向布局，自然不会触发横向滚动。

方案1：Flexbox布局（推荐） #

Flexbox是实现横向排列最简洁的方式，只需给父容器设置display: flex并禁止换行，子元素就会横向并排，超出父容器宽度时自动触发横向滚动。

<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll; display: flex; flex-wrap: nowrap;">
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black;">TEST 0</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white;">TEST 1</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow;">TEST 2</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange;">TEST 3</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue;">TEST 4</div>
</div>

关键属性说明 #

• display: flex：将父容器转为flex容器，子元素自动成为flex项
• flex-wrap: nowrap：强制子元素不换行，保持横向连续排列
• overflow-x: scroll：子元素总宽度超出父容器时，显示横向滚动条

方案2：Inline-Block + White-Space #

通过父容器的white-space: nowrap阻止内联元素换行，子元素设置display: inline-block实现横向并排。

<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll; white-space: nowrap;">
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black; display: inline-block;">TEST 0</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white; display: inline-block;">TEST 1</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow; display: inline-block;">TEST 2</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange; display: inline-block;">TEST 3</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue; display: inline-block;">TEST 4</div>
</div>

关键属性说明 #

• white-space: nowrap：禁止容器内元素换行，让inline-block元素保持在同一行
• display: inline-block：让块级元素支持横向排列，同时保留自身宽高属性

方案3：Grid布局 #

利用Grid的自动列排列特性，实现横向滚动效果。

<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll; display: grid; grid-auto-flow: column;">
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black;">TEST 0</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white;">TEST 1</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow;">TEST 2</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange;">TEST 3</div>
    <div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue;">TEST 4</div>
</div>

关键属性说明 #

• display: grid：将父容器转为grid容器
• grid-auto-flow: column：让子元素自动按列方向排列，而非默认的行方向

动态添加元素适配 #

以上三种方案都支持动态添加子元素：只要新增元素保持对应布局属性（flex项/inline-block/grid项），容器总宽度会自动扩展，横向滚动条也会随之适配，无需额外配置。

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