CSS Overflow

Control how content behaves when it exceeds container size

💧 What is Overflow?

The overflow property controls what happens when content is too large to fit in its container. It determines whether to clip, scroll, or show the overflowing content. 


/* Basic overflow example */
.container {
    width: 200px;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}

Output:

This is a lot of content that exceeds the container height. You can scroll to see all the content. The overflow property controls how this extra content is handled.

Overflow Values

👁️

Visible

Content overflows the container (default) 

overflow: visible;
✂️

Hidden

Clips content that overflows 

overflow: hidden;
📜

Scroll

Always shows scrollbars 

overflow: scroll;
🔄

Auto

Shows scrollbars only when needed 

overflow: auto;

🔹 Overflow Examples Comparison

Auto: overflow: auto generates scrollbars dynamically based on content overflow conditions, optimizing interface cleanliness. This intelligent approach provides scrollbars only when necessary, reducing visual noise while maintaining content accessibility. Implementation requires testing across content variations to ensure scrollbar appearance triggers appropriately. Proper use improves user experience metrics and interface predictability across different content scenarios.

.box {
    width: 150px;
    height: 80px;
    border: 2px solid #333;
    padding: 10px;
    margin: 10px;
    background-color: #f9f9f9;
}

.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }

Output:

Visible:

This content is longer than the container and will overflow outside the boundaries.

Hidden:

This content is longer than the container and will be clipped at the boundaries.

Scroll:

This content is longer than the container and will show scrollbars for navigation.

Auto:

This content is longer than the container and will show scrollbars only when needed.

🔹 Overflow-X and Overflow-Y

Vertical Scroll: Vertical overflow control with overflow-y creates contained content areas with independent scrolling contexts. This approach supports modal dialogs, sidebar widgets, and feed containers. Implementation combines with height constraints and positioning properties for predictable behavior. Modern CSS features like scroll-snap enhance user experience with intentional scroll positioning, particularly beneficial for mobile interfaces and touch navigation.

/* Horizontal scrolling only */
.horizontal-scroll {
    width: 200px;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Vertical scrolling only */
.vertical-scroll {
    width: 200px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

Output:

Horizontal Scroll:

This is a very long line of text that will require horizontal scrolling to see completely.

Vertical Scroll:

This content has multiple lines that will require vertical scrolling. Line 1. Line 2. Line 3. Line 4. Line 5. Line 6.

🔹 Practical Use Cases

Horizontal Gallery: Horizontal image galleries implement overflow-x: auto or scroll with white-space: nowrap on inline elements. This approach creates swipeable content areas perfect for mobile interfaces and touch devices. Accessibility enhancements include keyboard navigation support with arrow keys and proper ARIA labeling. Performance optimization involves loading="lazy" techniques and responsive image delivery to maintain fast loading speeds critical for SEO ranking factors.

/* Image gallery with horizontal scroll */
.gallery {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
}

/* Chat messages container */
.chat-container {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 15px;
}

/* Code block with scroll */
.code-block {
    max-height: 200px;
    overflow: auto;
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
}

Output:

Horizontal Gallery:

Image 1
Image 2
Image 3
Image 4

🧠 Test Your Knowledge

Which overflow value shows scrollbars only when content overflows?