🎯 CSS overflow Property

The CSS overflow property controls how content behaves when it exceeds the size of an HTML element.

If an element has a fixed width or height and its content becomes larger than the available space, the browser uses the overflow property to determine whether the content should remain visible, be hidden, or become scrollable.

Without overflow control, content can extend outside its container and disrupt page layouts. The overflow property helps create cleaner, more professional, and user-friendly designs.

• Prevents layout breaking
• Creates scrollable areas
• Improves user experience
• Maintains responsive layouts

The default value. Overflowing content remains visible even when it extends outside the element boundaries.

div {
    overflow: visible;
}
                

Content remains fully visible even outside the box.

The hidden value clips any content that exceeds the element's dimensions.

div {
    overflow: hidden;
}
                

Users cannot see any content outside the container boundaries.

Always displays scrollbars regardless of whether the content fits inside the container.

div {
    overflow: scroll;
}
                

Scrollbars remain visible even when no scrolling is necessary.

Automatically adds scrollbars only when the content exceeds the available space.

div {
    overflow: auto;
}
                

This is one of the most commonly used overflow values because it provides a cleaner user experience.

Resets the property to its default browser value.

div {
    overflow: initial;
}
                

The default value for overflow is visible.

Inherits the overflow value from the parent element.

div {
    overflow: inherit;
}
                

div {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}
                

CSS also provides separate properties for controlling horizontal and vertical overflow.

div {
    overflow-x: auto;
    overflow-y: hidden;
}