Overflow and scrolling in CSS

What happens when content is bigger than its box.

.code-pane {
  max-height: 24rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.snippet {
  overflow-x: auto;
  white-space: pre;
}

:target {
  scroll-margin-top: 4rem;
}

How it works

1. overflow: auto shows a scrollbar only when it is needed.
2. overscroll-behavior: contain stops a scroll chaining to the page.
3. scroll-margin-top keeps an anchor clear of a sticky header.

Keywords and builtins used here

• overflow
• rem
• snippet

The run, in numbers

Lines

15

Characters to type

193

Tokens

42

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 34 seconds.

Type this snippet

Step 6 of 6 in Boxes, step 19 of 26 in Selectors & the box model.

← Previous Next →