容器横向滚动功能异常问题排查求助

我不太擅长使用CSS，不清楚为什么我的CSS代码无法正常工作。当horizontal-list容器内的元素没有足够显示空间时，我需要为其添加横向滚动功能，尝试多种方法并查阅教程后仍未解决。

原始代码 #

CSS代码 #

.horizontal-list {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  padding-top: 90px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  position: relative;
  margin: 0 25px;
}

.circle span {
  position: absolute;
  top: -30px;
}

.line {
  height: 10px;
  background-color: #333;
  flex: 1;
  position: absolute;
  width: calc(100% - 120px);
  z-index: -1;
}

HTML代码 #

<div class="scroll-container">
  <div class="horizontal-list">
    <div class="circle">
      <span>Elemento 1</span>
    </div>

    <div class="circle">
      <span>Elemento 2</span>
    </div>

    <div class="circle">
      <span>Elemento 3</span>
    </div>

    <div class="circle">
      <span>Elemento 4</span>
    </div>

    <div class="circle">
      <span>Elemento 5</span>
    </div>

    <div class="line"></div>
  </div>
</div>

问题原因 #

1. flex子元素自动压缩：.circle默认带有flex-shrink: 1属性，容器宽度不足时会自动缩小尺寸，导致总宽度不会超过容器，无法触发横向滚动。
2. 连接线脱离布局流：.line使用绝对定位，脱离flex布局，容器滚动时不会跟随移动，视觉效果异常。
3. justify-content: center的干扰：该属性让子元素居中，结合元素压缩行为，无法触发预期的横向滚动。

修复后的代码 #

CSS代码 #

/* 父容器负责横向滚动，限制宽度范围 */
.scroll-container {
  overflow-x: auto;
  padding: 0 10px; /* 可选：避免元素贴边 */
}

.horizontal-list {
  display: flex;
  align-items: center;
  padding-top: 90px;
  overflow-y: hidden;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  position: relative;
  margin: 0 25px;
  flex-shrink: 0; /* 关键：禁止元素压缩，保持固定宽度 */
}

.circle span {
  position: absolute;
  top: -30px;
}

/* 修改连接线为flex子元素，自动填充空隙 */
.line {
  height: 10px;
  background-color: #333;
  flex: 1;
  min-width: 20px; /* 可选：防止间距过小 */
}

HTML代码（调整连接线位置） #

<div class="scroll-container">
  <div class="horizontal-list">
    <div class="circle">
      <span>Elemento 1</span>
    </div>
    <div class="line"></div>
    <div class="circle">
      <span>Elemento 2</span>
    </div>
    <div class="line"></div>
    <div class="circle">
      <span>Elemento 3</span>
    </div>
    <div class="line"></div>
    <div class="circle">
      <span>Elemento 4</span>
    </div>
    <div class="line"></div>
    <div class="circle">
      <span>Elemento 5</span>
    </div>
  </div>
</div>

关键修复点说明 #

• flex-shrink: 0：强制.circle保持固定宽度，容器宽度不足时不会压缩，确保总宽度超出容器后触发横向滚动。
• 连接线改为flex子元素：插入到每个圆圈之间，利用flex:1自动填充空隙，且会跟随容器滚动。
• 滚动容器移至父元素：让滚动条更贴合整体布局，也可根据需求保留在.horizontal-list上。

内容的提问来源于stack exchange，提问作者Reynier Lima Téllez