The overflow values
scrollHeight is the full content height; clientHeight is what the box shows. Scroll the third box with your mouse wheel.
When content is bigger than its box, overflow decides what happens: spill out (visible), cut off (hidden, clip), or scroll (scroll, auto); scrollbar-gutter and scroll-behavior polish how scrolling looks and feels.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .code box 200px tall that scrolls vertically only when its content is taller. Fill it with 400px of content and log scrollHeight and clientHeight (no padding or border on the box).
Show that a overflow: clip box can't be scrolled by script, but an overflow: hidden one can. Log both scrollTop values after setting them to 40.
Explain it without notes
Explain the five overflow values and when you'd use each.
What is a scroll container, and what side effects does creating one have?
Why does overflow-x: hidden alone often add a vertical scrollbar?
What problem does scrollbar-gutter: stable solve?
Preview
Console
Nothing logged yet.Expected console output
content height: 200 visible height: 80
auto box scrolled to: 50