CSS Overflow

The CSS overflow property controls how content that overflows an element's box is handled. It is particularly useful for managing content within containers of fixed size.

Understanding the Overflow Property

The overflow property can take the following values:

visible: The overflow is not clipped and may render outside the element's box.
hidden: The overflow is clipped, and the content is not visible outside the element's box.
scroll: The overflow is clipped, but a scroll bar is added to the element to allow scrolling through the content.
auto: The browser decides whether to add a scroll bar or not based on the content.

Syntax

The syntax for the CSS overflow property is:


/* Overflow Property Syntax */
selector {
    overflow: ;
}

Examples

Example 1: Overflow Visible


/* Overflow Visible */
.visible-example {
    width: 200px;
    height: 100px;
    overflow: visible;
    background: #f0f0f0;
}

Example 2: Overflow Hidden


/* Overflow Hidden */
.hidden-example {
    width: 200px;
    height: 100px;
    overflow: hidden;
    background: #f0f0f0;
}

Example 3: Overflow Scroll


/* Overflow Scroll */
.scroll-example {
    width: 200px;
    height: 100px;
    overflow: scroll;
    background: #f0f0f0;
}

Example 4: Overflow Auto


/* Overflow Auto */
.auto-example {
    width: 200px;
    height: 100px;
    overflow: auto;
    background: #f0f0f0;
}