Horizontal scrollbox not showing all elements

December 7, 2022

how do I make the horizontal scroll box show all elements as scrolling from left to right?

Currently i’ve got this result: some elements are not visible inside and can’t be scrolled more to the left

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