Overflow in CSS - Control Extra Content Inside Boxes

When content is larger than its container, it creates overflow. The overflow property decides how the browser should handle that extra content.

If you are looking for overflow in CSS, the difference between overflow hidden and auto, or how to remove horizontal scrollbars, this lesson explains it clearly.

What Is overflow in CSS?

The overflow property controls content that goes outside an element's box when width/height are limited.

Simple definition: Overflow in CSS decides whether extra content is visible, hidden, or scrollable.

Main overflow Values in CSS

1) overflow: visible (default)

Extra content spills outside the box and remains visible.

.box {
    overflow: visible;
}

Expected result: content may overlap other elements.

2) overflow: hidden

Extra content is clipped and hidden.

.box {
    overflow: hidden;
}

Expected result: clean edges with no content outside the box.

3) overflow: scroll

A scrollbar is always shown, even if content is not overflowing.

.box {
    overflow: scroll;
}

4) overflow: auto

A scrollbar appears only when needed (most common choice).

.box {
    overflow: auto;
}

What does this mean overall? You choose the behavior that best matches your layout needs.

Common mistake: using scroll everywhere when auto looks cleaner.

overflow-x and overflow-y in CSS

You can control each axis independently:

• overflow-x: horizontal (left/right).
• overflow-y: vertical (top/bottom).

.container {
    overflow-x: hidden;
    overflow-y: auto;
}

What does this code do? It hides horizontal scrolling and allows vertical scroll when needed.

Expected result: better UX, especially on mobile.

Common mistake: hiding overflow-x when important content actually overflows.

When Should You Use overflow: hidden?

• Clipping extra content inside cards or rounded images.
• Removing unwanted horizontal scrollbars in layout.
• Limiting visible area for animation effects.

When Should You Use overflow: auto?

• Long content boxes (comments, logs, dashboards).
• Tables or lists inside a fixed-height container.
• A cleaner alternative to always-on scrollbars.

Common Mistakes with Overflow in CSS

1) Clipping important content unintentionally: caused by overflow: hidden.

2) Annoying always-on scrollbars: using scroll instead of auto.

3) Ignoring overflow-x: causes annoying horizontal scroll on mobile.

FAQ - Common Search Questions

What is the difference between overflow hidden and overflow auto?

hidden clips overflow, while auto shows a scrollbar only when needed.

How do I hide the horizontal scrollbar in CSS?

Often with overflow-x: hidden;, while also fixing the cause of extra width.

When should I use overflow: scroll?

When you want the scrollbar to always be visible, but it is less common than auto.

Why does content overflow a div in CSS?

Because the default is often visible, or the element is smaller than its content.

Does overflow affect user experience?

Yes, directly. The right value prevents visual mess and improves readability.