CSS overflow Behavior Tester
See exactly how CSS overflow values behave. Test visible (default), hidden, scroll (always scrollbars), auto (only when needed), clip (no scrollbars). Plus separate overflow-x and overflow-y.
Container with overflowing content (200×200)
CSS
How to use the CSS overflow Behavior Tester
Pick an overflow value and watch the 200×200 box react to its oversized content. Set overflow-x and overflow-y separately to see axis-specific behavior. Copy the resulting CSS.
How overflow values actually behave
The overflow property decides what happens when content is larger than its box, and the values are easy to confuse. visible lets content spill out; hidden clips it with no scrollbar; scroll always shows scrollbars even when not needed; auto shows them only when content overflows; and the newer clip hides overflow without allowing any programmatic scrolling. They also interact: setting overflow-x and overflow-y differently can force a scroll context you did not intend.
This puts oversized content in a fixed box so you can switch values and see exactly what each does, including separate x and y axes, then copy the CSS. Once you know a scrollbar will appear, style it with the scrollbar designer; to clip an element to a non-rectangular shape instead, use the clip-path generator.
Common use cases
- Debugging spill — find why content escapes or clips unexpectedly.
- Scroll containers — choose between auto and scroll for a panel.
- Single-axis scroll — set overflow-x and overflow-y independently.
- Clipping content — compare hidden and clip for cutting off overflow.
- Learning overflow — see all five values behave on the same box.