CSS Overflow Playground
Preview overflow behavior in a fixed-size content box.
Understand overflow behavior
overflow decides what happens when content is bigger than its box — scroll, clip, or spill out — and the variants (auto, hidden, scroll, clip) behave subtly differently. This playground lets you preview each in a fixed-size box so the effect is clear.
Overflow bugs are a common source of mysterious scrollbars and cut-off content, and seeing the behavior directly is the fastest way to understand it. Experiment with the values against real content and copy the one that does what you intend.
Overflow, previewed
auto shows scrollbars only when needed, scroll always shows them, and clip has none at all — the playground makes the difference visible. Runs in your browser.
Frequently asked questions
What is the difference between hidden and clip?
Both hide overflowing content, but hidden still makes the box a scroll container that JavaScript can scroll, while clip does not. Use clip when position: sticky must keep working inside the box.
Why use auto instead of scroll?
scroll always reserves scrollbars on systems that show them, even when nothing overflows. auto shows them only when the content is too large.
Why does overflow: visible text spill onto other elements?
visible lets content draw outside the fixed 260 × 110 box without affecting layout, so it overlaps whatever comes next. That is the default for every element.
Related tools
Practical utilities for front-end design and implementation work.