如何让Horizontal scrollbox滚动时完整显示所有元素？

问题根源 #

你的.tags容器设置了justify-content: center，这个属性会让所有标签元素整体居中排列。当标签总宽度超过容器宽度时，左右两侧的元素会被容器边界截断，且滚动时无法触及被截断的部分，导致部分元素不可见、无法向左滚动到最左侧内容。

直接解决方案 #

移除.tags中的justify-content: center属性，让标签从左到右自然排列，此时滚动容器就能完整显示所有元素，支持左右滚动到首尾标签。

修改后的CSS代码

.tags {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: scroll;
  width: 100%;
}

.tag {
  padding: 10px;
  border: 3px solid rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
}

HTML代码无需改动，修改后滚动时就能完整访问所有标签元素。

进阶方案（保持初始居中效果） #

如果需要保留初始状态下标签居中的视觉效果，同时支持完整滚动，可以通过嵌套容器实现：

进阶版CSS代码

.tags-wrapper {
  overflow-x: scroll;
  width: 100%;
}

.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 100%;
  padding: 0 1rem; /* 可选：避免标签贴紧容器边缘 */
}

.tag {
  padding: 10px;
  border: 3px solid rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
}

对应HTML代码

<div class="tags-wrapper">
  <div class="tags">
    <div class="tag">JavaScript</div>
    <div class="tag">HTML</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
    <div class="tag">CSS</div>
  </div>
</div>

这个方案通过外层容器负责滚动，内层容器保持标签居中，同时设置min-width: 100%确保滚动范围覆盖所有内容。

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