For example, imagine a box with a fixed height of 120px. If the content inside that box needs more than 120px of vertical space, the content may extend outside the box.

The overflow property tells the browser how to handle that extra content.

Basic Syntax

selector {
    overflow: value;
}

Overflow Diagram

Content is larger than the container:

This content is larger than the container. The overflow property decides what the browser should do with the extra content.

The container controls how the extra content is displayed.

Simple Explanation

Think of a small box containing a large amount of text.

If the text does not fit inside the box, the extra content is called overflow.

CSS provides different ways to handle this extra content.

You can allow the content to remain visible, hide it, always show scrollbars, or let the browser decide whether scrolling is necessary.

Main Overflow Values

visible

Extra content remains visible outside the element.

hidden

Extra content is clipped and is not visible outside the element.

scroll

Scrollbars are provided so the user can access the overflowing content.

auto

The browser adds scrollbars when they are required.

Example 1: overflow: visible

The visible value allows content to continue outside the element when it does not fit.

.box {
    width: 300px;
    height: 120px;
    padding: 15px;
    border: 3px solid blue;
    background-color: lightblue;

    overflow: visible;
}

Output

This is a long content example. Because overflow is set to visible, the content can continue outside the fixed-height box when there is not enough space.

Example 2: overflow: hidden

The hidden value clips content that does not fit inside the element.

.box {
    width: 300px;
    height: 120px;
    padding: 15px;
    border: 3px solid green;
    background-color: lightgreen;

    overflow: hidden;
}

Output

This is a long content example. The box has limited height, so the remaining content is clipped because overflow is hidden.

With overflow: hidden, the content still exists in the HTML, but the part that goes outside the container is not visible.

Example 3: overflow: scroll

The scroll value adds scrollbars so the user can access content that does not fit.

.box {
    width: 300px;
    height: 120px;
    padding: 15px;
    border: 3px solid orange;
    background-color: lightyellow;

    overflow: scroll;
}

Output

This is a long content example. The content is larger than the container, so scrollbars allow the user to move through the content.

Example 4: overflow: auto

The auto value allows the browser to add scrollbars when the content actually overflows the element.

.box {
    width: 300px;
    height: 120px;
    padding: 15px;
    border: 3px solid purple;
    background-color: #e9d5ff;

    overflow: auto;
}

Output

This is a long content example. The browser manages the overflowing content automatically when overflow is set to auto.

overflow-x and overflow-y

Sometimes you may want to control horizontal and vertical overflow separately.

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

overflow-x controls content that overflows horizontally.

overflow-y controls content that overflows vertically.

This is useful when you want horizontal scrolling but do not want vertical scrolling.

Overflow Values Comparison

Value	What Happens?	Scrollbar
visible	Extra content remains visible.	No automatic scrollbar.
hidden	Extra content is clipped.	No.
scroll	Extra content can be accessed by scrolling.	Yes.
auto	Browser decides when scrolling is required.	When required.

Where is Overflow Used?

Long Text

Useful when a container has limited height but may contain a large amount of text.

Scrollable Panels

Useful for creating panels where users can scroll through additional content.

Images

Overflow can help control images or other elements that are larger than their containers.

Responsive Layouts

Horizontal overflow can be controlled when content does not fit smaller screens.

Important: Use overflow: hidden carefully. It can hide content that users need to see. When content must remain accessible, consider auto or scroll when appropriate.

Summary

The CSS overflow property controls what happens when content is larger than its container. The main values are visible, hidden, scroll, and auto. You can also control horizontal and vertical overflow separately using overflow-x and overflow-y. Understanding overflow is important when creating fixed-size containers, scrollable sections, and responsive layouts.

← Previous: Box Shadow

Next: Flexbox →