Basics · Layout

Overflow and scroll

A box with a fixed height and more content than fits has to decide what to do with the overflow. That is what overflow controls:

• unset — visible; content spills past the box and isn’t clipped.
• hidden — clips to the box, no scrolling.
• scroll — clips and always shows a scrollbar.
• auto — clips and shows a scrollbar only when content overflows.

Turn a box into a scroll container and it tracks a scroll offset, clamps it to the content, and draws a scrollbar (the clip narrows to make room). You scroll it with the mouse wheel, or with PageUp/PageDown and the arrows once it holds focus.

The list below is taller than its 6-cell box but has no overflow, so it just spills. Contain it.

Your turn

Give the list overflow: auto so it scrolls inside its box:

.list {
    border: single;
    height: 6;
    overflow: auto;
}

Press Run, click into the list, and scroll with the wheel or PageUp/PageDown — the extra items are reachable inside the box.