Overflow

When Content Runs Wild

Overflow is the guardian of excess. Imagine your webpage as a glass, and overflow decides what happens when the content spills over. With overflow: visible, the content happily flows beyond the edges, as if that’s perfectly fine. With overflow: hidden, the chaos is neatly trimmed and tucked away, keeping things tidy.

For a more interactive approach, overflow: scroll adds a stylish scrollbar, allowing your visitors to explore the overflowing content without it spilling over. And if you’d rather leave it to the browser, overflow: auto takes charge, showing scrollbars only when they’re truly needed. With overflow, you control how your elements handle excess—whether they conceal it, display it proudly, or manage it with finesse.

Let’s Keep Going

Overflow
visible
hidden

scroll
auto

When content spills out of bounds

Hide it, scroll it, or let it overflow? You decide what happens when there’s just too much!

Overflow

What to Do When It’s Too Much?

Sometimes an element has so many secrets to share that it bursts out of its magical bounds. What should you do when the stories spill over the edge? With overflow, you decide the fate of the unruly content. Should it boldly overflow beyond its borders like an unruly potion, be trimmed discreetly like an unfit chapter, or be contained gracefully in a stylish scrollbar? The choice is yours!

visible

The Escapist

With “overflow: visible,” you grant your content the freedom to spill beyond the boundaries of its element. It overflows like a potion bubbling out of an unwatched cauldron. This is the default state, where nothing is hidden, and the content expands unrestrained, as if claiming the world for itself.

.element {
    overflow: visible;
}

The .element allows overflowing content to extend beyond its boundaries—this is the default behavior.

hidden

The hidden spell

When you want to ensure that content stays within its bounds, use “overflow: hidden”. Anything that spills over is neatly clipped away, as if an invisible spell is keeping the unruly elements in check.

.element {
    overflow: hidden;
}

The .element clips any overflowing content, ensuring that only what lies within the element’s boundaries remains visible.

scroll

Let it Flow

Sometimes the content piles up so high that you don’t want to hide it but also wish to avoid chaos. That’s where “overflow: scroll” comes in. The content stays neatly within its frame, while a sleek scrollbar appears, letting you explore everything at your leisure.

.element {
    overflow: scroll;
}

The .element gains scrollbars that allow navigation of overflowing content, regardless of whether the content actually exceeds the boundaries.

auto

The Clever Assistant

With “overflow: auto,” you hand over the decision-making power to the browser—a wise choice if you’d rather not sweat the details. If the content overflows, the browser conjures up a scrollbar. If everything fits, the scrollbar remains hidden, quietly blending into the background.

.element {
    overflow: auto;
}

The .element displays scrollbars only when the content overflows the boundaries of the element.

In this lesson, you have learned…

How to use overflow: visible to let content freely flow beyond the boundaries of an element.
Why overflow: hidden is useful for neatly cutting off excess content and keeping your layout tidy.
How overflow: scroll allows you to add scrollbars so that overflowing content remains accessible.
Why overflow: auto is the best choice for flexible designs, as the browser automatically decides when scrollbars are needed.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Mastering the Shadows

In the winding corridors of the shadowy fortress, the shadows twist and flow like a fickle river—sometimes calm, sometimes chaotic, and often simply unpredictable. Fear not! With the art of overflow behavior, you can tame these elusive streams. Learn whether shadows should overflow like an untamed potion, stay confined within boundaries, or escape gracefully through a well-placed scrollbar. Master this technique, and the fortress—and its shadows—will be yours to command.

Your Task: Master Overflow

Test overflow: visible
Apply overflow: visible; to display overflowing content.
Observe how the elements behave when their content spills beyond the box.
Employ overflow: hidden
Use overflow: hidden; to cut off overflowing content.
Notice how shadows spilling from the box suddenly disappear.
Overflow scroll and scrollbars
Apply overflow: scroll; to test scrollbars.
Check how users can reveal hidden content by scrolling.
Overflow auto and adjustments
Use overflow: auto; to display scrollbars only when needed.
Test how the element adapts to various content sizes.
Overflow in specific directions
Experiment with overflow-x and overflow-y to control scrolling along the horizontal or vertical axis only.
See how the element reacts to content that exceeds bounds in one direction.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Overflow */
.overflow-visible {
    overflow: visible;
    background: linear-gradient(135deg, #43a047, #2e7d32);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.overflow-hidden {
    overflow: hidden;
    background: linear-gradient(135deg, #e53935, #c62828);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.overflow-scroll {
    overflow: scroll;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.overflow-auto {
    overflow: auto;
    background: linear-gradient(135deg, #fb8c00, #ef6c00);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Additional content for overflow */
.box p {
    margin: 0;
    font-size: 1.4rem;
}

.box .overflow-text {
    font-size: 2rem;
    line-height: 2rem;
    margin: 0;
}

Let’s Keep Going