overflow-x: scroll; overflow-y: visible;
I want to have a strip of fixed-size box divs across the bottom of a page (with a sidebar on the right.) The number of boxes can vary and when there are too many of them, they scroll horizontally. Added to each of these boxes is a popover that appears above each box when clicked.
When you set a div to overflow-x: auto or scroll, the overflow-y is set to hidden. The popovers won’t show up.
The Internet’s solution
Nesting. The original boxes div that contains all the box divs can be nested in a much taller box, boxesContainer. This is also nested in another box, boxesPlaceholder. Instead of putting overflow-x on boxes, you put it on boxesContainer. Set both of these to position: absolute, bottom: 0. Then the boxesPlaceholder is set to relative and sized to the same height as boxes.