CSS Overflow - Detailed Overview

Introduction to CSS Overflow

The CSS overflow property controls what happens when content overflows an element's box. It can be set to visible, hidden, scroll, or auto.

Overflow Hidden

Using overflow: hidden; hides any content that overflows the element's box:

.overflow-hidden {
    overflow: hidden;
    background-color: #e0f0e0;
}

This is some very long content that will overflow the container but will be hidden.

Overflow Scroll

Using overflow: scroll; adds scrollbars to the element if the content overflows:

.overflow-scroll {
    overflow: scroll;
    background-color: #f0e0e0;
}

This is some very long content that will overflow the container and make scrollbars appear.

Overflow Auto

Using overflow: auto; adds scrollbars only if needed:

.overflow-auto {
    overflow: auto;
    background-color: #e0e0f0;
}

This is some very long content that will overflow the container and show scrollbars only if necessary.