Overflow

Overflow

Overflow utilities control what happens when content is larger than its containing box and are especially useful for tables, code, long URLs, and horizontally scrollable regions.

Core concept

Explain overflow-auto, hidden, visible, and scroll, plus axis-specific behavior. Discuss why hiding overflow can accidentally cut focus rings or interactive content.

Using it in a real interface

A responsive table often needs horizontal scrolling while the page itself should remain stable. Explain how a wrapper can own the horizontal overflow instead of forcing the entire document to scroll.

Implementation notes

Use overflow intentionally. If content is unexpectedly clipped, inspect width, whitespace, long strings, and parent sizing before applying hidden.