Search code examples
javascripthtmlcssweb-deployment

Horizontal scrollbar crops the left elements when number of elements are increased

I am trying to make a horizontal scrollbar which will have elements used for filtering images. The elements could be like all, app, web etc. and the images will be filtered accordingly. The filter works fine but as soon as the number of elements in the scroll bar increase then the left elements start to crop.

working-

enter image description here

not working(the scrollbar has cropped "all" and "app" elements)- enter image description here

HTML-

  <div class="scrollmenu">
                   
    
                 
                    <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
                      
                      <li data-filter="*" class="filter-active">All</li>
                      <li data-filter=".filter-app">App</li>
                      <li data-filter=".filter-card">Card</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
                      <li data-filter=".filter-web">Web</li>
    
                      
                    </ul>
               
                  
                  
                </div>

CSS-

div.scrollmenu {
  background-color: rgb(255, 255, 255);
  overflow-x:auto;
  overflow-y: hidden;
  white-space:nowrap;
  margin: 0 auto;
  text-align: center;
 
}

.portfolio #portfolio-flters {
  list-style: none;
  margin-bottom: 20px;
}



.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  margin: 10px 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  transition: all 0.3s;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
}
Solution

  • just add display:flex and it will work.

    div.scrollmenu {
      background-color: rgb(255, 255, 255);
      overflow-x:auto;
      overflow-y: hidden;
      white-space:nowrap;
      margin: 0 auto;
      text-align: center;
      display: flex;
      width: 500px;
     
    }