CSS 'overflow' Property: Complete Reference

What is the CSS overflow Property?

The CSS overflow property controls what happens when content overflows the boundaries of a block-level element's box. It specifies whether to clip the overflowing content, display it, add scrollbars, or handle it automatically. This property is essential for managing layout and ensuring content fits within its container.

It can be applied to any block-level or replaced element that has a defined height or max-height. The property accepts two values: one for the horizontal axis (overflow-x) and one for the vertical axis (overflow-y), but the shorthand overflow sets both.

Why It Matters

Without controlling overflow, content can break out of its container, causing layout issues, overlapping text, or broken designs. Proper overflow handling ensures:

Containers maintain their intended dimensions.
User interfaces remain scrollable when needed.
Content is clipped or hidden to preserve design integrity.
Accessibility improves by preventing horizontal scrolling on small screens.

How to Use the overflow Property

The overflow property accepts these values:

visible (default): Content is not clipped and may render outside the box.
hidden: Content is clipped, and no scrollbars appear.
scroll: Content is clipped, but scrollbars always appear (even if not needed).
auto: Content is clipped, and scrollbars appear only when necessary.
clip: Similar to hidden, but also prevents programmatic scrolling.

Example: overflow: visible

.box {
  width: 200px;
  height: 100px;
  overflow: visible; /* default */
  border: 1px solid #000;
}

Content overflows the box and is fully visible outside its boundaries.

Example: overflow: hidden

.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #000;
}

Content that exceeds the box is clipped and invisible.

Example: overflow: scroll

.box {
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 1px solid #000;
}

Scrollbars appear on both axes, even if content fits. This ensures a consistent scrollable area.

Example: overflow: auto

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
  border: 1px solid #000;
}

Scrollbars appear only when content overflows. This is the most common and user-friendly choice for dynamic content.

Example: overflow: clip

.box {
  width: 200px;
  height: 100px;
  overflow: clip;
  border: 1px solid #000;
}

Behaves like hidden, but the element's content cannot be scrolled programmatically (e.g., via JavaScript). This is useful for fixed UI components.

Using overflow-x and overflow-y

You can control horizontal and vertical overflow independently:

.box {
  overflow-x: hidden;   /* hide horizontal overflow */
  overflow-y: auto;     /* allow vertical scrollbar when needed */
  width: 300px;
  height: 200px;
}

This is useful for preventing unwanted horizontal scrolling while allowing vertical scrolling for long content.

Practical Use Cases

Scrollable containers: Use overflow: auto on a div to make its content scrollable when it exceeds the container's height.
Image galleries: Use overflow: hidden with a fixed size to create a clipping mask for images.
Modal dialogs: Prevent body scrolling by setting overflow: hidden on the <body> when a modal is open.
Text truncation: Combine overflow: hidden, white-space: nowrap, and text-overflow: ellipsis to create truncated text.

Best Practices

Use overflow: auto instead of scroll to avoid unnecessary scrollbars that waste space.
Avoid overflow: hidden on the <body> unless necessary, as it can break scrolling for users with assistive technology.
Test overflow behavior on different viewports to ensure responsive design.
When using overflow: clip, remember it also disables programmatic scrolling, which may affect user experience.
Combine overflow with max-height or max-width to create flexible containers that only scroll when needed.
Use overflow-x: hidden and overflow-y: auto to prevent horizontal scrollbars from breaking layouts on mobile devices.

Browser Support and Considerations

The overflow property is widely supported across all modern browsers. The clip value is newer (CSS Overflow Module Level 3) and has good support in current versions of Chrome, Firefox, Safari, and Edge. For legacy browsers, fall back to hidden if necessary.

Conclusion

The CSS overflow property is a fundamental tool for controlling content visibility and scroll behavior within containers. By mastering its values—visible, hidden, scroll, auto, and clip—you can create robust, user-friendly layouts that handle dynamic content gracefully. Always consider accessibility and responsive design when applying overflow rules, and prefer auto for most scrollable areas. With these techniques, you'll prevent layout breaks and deliver polished web interfaces.