Parent container with overflow not changing height based on child elements
Hello, im trying to make a slider with 4 divs that changes between them. Inside of these divs there are 4 other divs which should contain an image and some text. I managed to do the script and to change them between them.
But i have a problem with overflow, the main container doesn't change it's height in anyway. I want it to change its height responsive to the child elements and remove the Y scroll. I tryed to use overflow-x and overflow-y auto but nothing. Maybe if i put some screenshoots it will be easier to understand. Only way to change its height is if i expresively write it. If i remove the height it should nothing. How does this annoy me? I want to use it on a homepage as a last uploaded products that shows the last 16 products. I could put a bigger height, but depending on the title text from the database it may overflow or look bad.
2 Replies
Is the problem you're having is that the height of the container for all of the slides depends on the tallest child even if the tallest is off the screen?
You could use getBoundingClientRect however this should only be used to transition between the old and new height and immediately be removed after so that if you change the screen width and the height changes it is able to respond. You do have to be able to get the accurate height which would mean not using overflow and instead putting the slides inside a container and when they're off the screen make them
position: absolute and fit the width of the container
You also need to deal with what it looks like moving the slides that require the container to grow, as it could look weird having the card slide in before the container is big enough, or if you pause to grow it and then slide inMDN Web Docs
Element: getBoundingClientRect() method - Web APIs | MDN
The Element.getBoundingClientRect() method returns a
DOMRect object providing information about the size of an element and its
position relative to the viewport.
Not very clear what your intention is exactly