Horizontal scroll won't trigger

I have followed this code word for word following a YouTube video. The strange thing with this issue is that when the person on the YouTube video uses this code, his code creates the necessary functionality that enables the grid items to scroll to the right. When I try to run the exact same code base, my grid items are simply static and there is no side scrolling option..

If anyone could have a look and help me understand why, that would be awesome.

.wrapper {
  max-height: 120px;
  border: 1px solid #ddd;
  display: flex;
  overflow-x: auto;
}

.wrapper::-webkit-scrollbar {
  width: 0px;
}

.wrapper .item {
  min-width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}

<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

Solution 1:

Once you remove the prefixed rule, the scroll bar generates.

That seems to be the only adjustment you need to make (others I made are optional).

.wrapper {
  display: flex;
  overflow-x: auto;
}

.wrapper .item {
  flex: 0 0 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}

<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

jsFiddle demo

Horizontal scroll won't trigger

Solution 1:

Related

Recent Posts