I have a container div listings_container that contains a variable number of divs listing, each clearing the div before it. The container div listings_container has the CSS property overflow-x: hidden; overflow-y: auto; and a fixed width and a max-height defined.
Problem: How do I prevent the overflowed divs from taking up space? Say listings_container has a height of 30px and listing has a height of 10 px. If we have 4 or more listing inside listings_container, we the 4th listing div onwards will be hidden and a vertical scrollbar appears for listing_cotainer. The space taken up by the overflowing listing div can cause listings_containerto clear another floated div, which is what I want to avoid.
Any help really appreciated! Thanks!
Overflow content will always go beyond the boundary of the control if you leave it at auto which produces a pretty unusable effect. If you set the size of a div you typically wouldn’t want to use auto unless you know the content won’t overflow.
Your options are either to hide or to scroll to keep the size fixed. Personally I use scroll containers for this which is basically using overflow-y: scroll; and then use a fixed height.