overflow-x: scroll; overflow-y: visible;

The situation

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.

The problem

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

Just use JavaScript. You can do fancy math to get the position of the box, and in another div, set up a popover that is fixed on the page in a position that lines up with the box. When you scroll, the popover doesn’t move with the box, but this can also be fixed with JavaScript and more fancy math. I just want it to be simple.

My 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.

SCSS

.boxesPlaceholder {
height: 200px;
position: relative;
.boxesContainer {
width: 100%;
height: 600px;
position: absolute;
bottom: 0;
overflow-x: scroll;
.boxes {
height: 200px;
position: absolute;
bottom: 0;
white-space: nowrap;
}
}
}

HTML

<div class="boxesPlaceholder">
<div class="boxesContainer">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.