CODEWITHSUNDEEP
htmlcssscroll
TheGoldyOne
TheGoldyOne

Reputation: 48

Horizontal scrollbox not showing all elements

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

Currently i've got this result: enter image description here 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>

Upvotes: 1

Views: 46

Answers (1)

Daniel Kamiński
Daniel Kamiński

Reputation: 62

Try removing justify-content: center from tags class. I hope it will work

Upvotes: 1

Related Questions