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