Bollate

HTML

[ANSWERED] html – Scrollbar not considering overflow in child div

By

Nov 20, 2022 , , ,

Solution 1 :

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>

Solution 2 :

On mobile set .product-carousel to width: 100%; overflow: auto; /* or overflow-x: auto;*/

Explanation:

Your code didn’t work, because .card.product do not overflows its container (.product-carousel);

120px * 3 + 30px margin = 390px and container got 400px so products fits there nice;

In fact it is .product-carousel that overflows .cards (because .cards got browser window size, and .product-carousel is fixed 400px). When browser window is less than 400px .product-carousel stick out of the .cards;

This is why scroll only appeared when overflow on .cards was other than hidden.

.cards {
    height: 525px;
}
.product-carousel {
    display: flex;
    width: 100%;
    height: 175px;
    overflow: auto;
    position: relative;
}
.product-carousel > .card.product{
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}

Hope this helps

Problem :

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;
}

Comments

Comment posted by Nico Müller

Thanks for the effort! +1 There is one key difference which is that my child is overflowing the parent (the width of the child). Could that be an issue?

Comment posted by i.imgur.com/WKulFsI.png

I tried setting a lower width in your example for the parent, the scrollbar looks weird but it would work. So I guess I need to go back to the drawing board.

Comment posted by Pipimi

I think I understand now. I edited the fiddle. I put another div (carousel-wrapper) which is the one that has the scrollbar. It might need some tweakings, but check if that is what you are looking for.

Comment posted by Nico Müller

Thanks for the effort! Unfortunately it messed up the carousel format a bit (everything pressed together) and the answer above solved the issue.

By

Related Post

HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022
HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

Leave a Reply

Your email address will not be published. Required fields are marked *

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022