Search code examples
htmlcssoverflowcarousel

Scrollbar not considering overflow in child div

I am trying to have a carousel of products that are partly outside the screen and can be scrolled, to simulate a component of a mobile device.

The scrollbar is not going to the end of the product-carousel class but if I remove overflow hidden from the card class, I can see that there is a scrollbar at the bottom of the parent div that would act correctly. I would like to move this behavior to the carousel.

What do I need to do to see the correct scrollbar under the carousel rather than the parent div? Scrolling the parent div results in showing background, I just want the products to slide to the left/right.

Scrollbar not considering overflow

Scrollbar not considering overflow

Carousel has the correct width

Div has a higher width then shown

After removing overflow from the cards parent the correct behavior is shown but for the parent (See small scrollbar at the bottom)

If I remove overflow hidden from the card class I see that there the scrollbar would act correctly. I would like to move this behavior to the child div

HTML

<div class="cards">
    <div class="product-carousel">
      <div class="card product">
             <img class="home product-image" src="assets/product1.jpg"></img>
             <div>
                ...
                </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="assets/product2.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="assets/product3.jpg"></img>
             <div>
                ...
             </div>
      </div>
   </div>
</div>

CSS

.cards {
    /* overflow: hidden; */
    overflow-y: auto;
    height: 525px;
}
.product-carousel {
    display: flex;
    width: 400px;
    height: 175px;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
}
.product-carousel > .card.product{
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}
Solution

  • I pasted it and it works fine, although probably I am misunderstanding it. Should it work in another way?

    I made a JS fiddle, I added some borders and images to test it.

    EDIT: I added a div that works as a wrapper for the carousel, and set width 100%, height auto and overflow-x: scroll

    .cards {
   /* overflow: hidden; */
    overflow-y: auto;
    height: 525px;
    border: 1px solid purple;
}
.carousel-wrapper{
width: 100%;
height: auto;
overflow-x: scroll;
border: 2px solid green;
}
.product-carousel {
     background-image: url("https://www.freevector.com/uploads/vector/preview/30374/Colorful-Plait-Background.jpg");
     background-repeat: repeat;
    border: 1px solid red;
    display: flex;
    height: 175px;
    width: auto;
    float:left;
    position: relative;
}
.product-carousel > .card.product{
    border: 1px solid black;
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}

img{
    width: 100px; height: 100px;
}

p{
  color: purple;
  font-size: 20px;  
}
    <div class="cards">
<div class="carousel-wrapper">
    <div class="product-carousel">
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
                </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
        <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
        <div>
           ...
        </div>
 </div>
 <div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
 <div class="card product">
    <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
    <div>
       ...
    </div>
</div>
<p>product carousel</p>
   </div>
   </div>
   <p> parent </p>
</div>