Overflow visible and hidden

Learn overflow: visible and hidden values.

What happens to overflowing content?

Content can spill out of a box — a long text, a wide image, or side-by-side items. The CSS overflow property tells the browser what to do with the spill. The default value is visible: the overflowing part flows outside the box and stays visible.

Sometimes that is unwanted; for example, a long text inside a card may leak over neighboring items. Then you set overflow to a different value to bring the spill under control.

Cut the spill: overflow: hidden

The overflow: hidden value clips and hides the overflowing part. Even when the content is larger than the box, nothing leaks outside. This is handy for fixed-height cards, badges, and avatar frames.

Note: hidden does not add a scrollbar; the content is simply cut off. That means half a line of text can disappear. So you use hidden on purpose, where clipping is what you want.

Exercise Clip the panel content

Write a .panel class selector and add an overflow: hidden declaration inside it. The panel will then clip any content that exceeds its height.

Show example solution

/* clip the content */
.panel {
  overflow: hidden;
}

Test yourself

What does overflow: visible do?
```
.panel {
  height: 80px;
  overflow: visible;
}
```
- Leaves overflowing content visible outside the box (default)
- Hides the overflowing part
- Always shows a scrollbar
- Clips the content to fit the box
Show answer

Leaves overflowing content visible outside the box (default) — Correct. visible is the default and leaves the overflowing part visible.

Clip the panel content

.panel {
  ____;
}

Show answer

.panel {
  overflow: hidden;
}

Match each value to its behavior

visible

Leaves spill visible
hidden

Clips and hides spill
scroll

Always shows a bar
auto

Bar only when needed

Next lesson: Overflow scroll and auto

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies