水平滚动框不显示所有元素答案

【问题标题】：Horizontal scrollbox not showing all elements水平滚动框不显示所有元素
【发布时间】：2022-12-18 03:43:52
【问题描述】：

如何使水平滚动框将所有元素显示为从左向右滚动？

目前我得到了这个结果：有些元素在里面不可见并且不能向左滚动更多

.tags {
  display: flex;
  align-items: center;
  justify-content: 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;
}

<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>

【问题讨论】：

删除justify-content: center;？

标签： html css scroll

【解决方案1】：

尝试从 tags 类中删除 justify-content: center。我希望它会起作用

【讨论】：