CSS Overflow

The CSS <overflow> property controls what happens when an element’s content exceeds the defined width or height. It allows us to hide overflowing content, show scrollbars, or adapt automatically.

The Basics of Overflow

The <overflow> property can take four main values: visible (default, content overflows), hidden (overflowing content is hidden), scroll (scrollbars always appear), and auto (scrollbars appear only when necessary).

In the following example, the content would overflow the box, but the <overflow: hidden;> setting hides the excess:

Comparison of Overflow Values

Hidden, scroll, and auto provide different solutions for handling content. Scroll always shows a scrollbar, while auto only shows it when necessary.

Axis-Specific Settings

With the <overflow-x> and <overflow-y> properties, we can control horizontal and vertical overflow separately. This is useful, for example, if we only want horizontal scrolling.

Overflow in Inline Elements

Overflow matters not only for block elements: inline-block elements can also handle overflow.

Overflow and Flexbox

In Flexbox layouts, overflow ensures that oversized elements remain scrollable.

Text-overflow: ellipsis

With text-overflow: ellipsis, long text is shortened with three dots (...) if it does not fit inside the box.

Tips for Using Overflow

Correct use of overflow helps avoid unexpected layout problems and also improves content clarity:

• Always check how content behaves on different screen sizes.
• Use <overflow: auto;> to improve user experience by avoiding unnecessary scrollbars.
• Axis-specific settings let you precisely control the scrolling direction.