Like a cup of coffee that’s brimming over, the CSS overflow property manages what happens when content overflows, or spills outside, its container. Ever encountered a piece of text or image that’s too large for its designated box and it spills over? Well, that’s where our good friend overflow comes in, instructing the browser on how to handle these pesky overflow situations. This could mean showing scrollbars, cutting off the excess content, or expanding the box.
Syntax
The overflow property is quite straightforward to use. You declare it on an element, and it comes with a few possible values to control the behavior of overflow content.
Here’s a simple code snippet:
1 |
div { |
2 |
overflow: auto; |
3 |
}
|
In this example, auto tells the browser to provide a scrollbar if the content overflows the div container. It’s like having an automatically deployable rescue boat when the flood (overflow) occurs!
By default, the overflow property is set to visible, which means that overflowing content is not clipped and can render outside the box.
This property applies to block containers, flex containers, and grid containers.
The overflow property value is not inherited. So, if you want all your divs to have the same overflow behaviour, you’ll need to specify it for each one.
Finally, CSS animations cannot be applied to the overflow property. It’s a stickler for stability and doesn’t really enjoy the limelight of flashy animations!
Example
This beautiful lemon yellow div has fixed dimensions. See what happens to the content within it when you alter the overflow value:
Keyword Values
Let’s jump into the keyword values for overflow. Imagine each keyword as a set of instructions you’re giving to your container about how to handle those overflowing elements.
visible
1 |
div { |
2 |
overflow: visible; |
3 |
}
|
By setting the overflow property to visible, you’re telling the container to let the content spill over. It’s like saying "hey, it’s okay if the coffee spills over the cup."
hidden
1 |
div { |
2 |
overflow: hidden; |
3 |
}
|
With hidden, any content that overflows the box won’t be displayed. It’s like having an invisible barrier that doesn’t allow anything to spill over.
scroll
1 |
div { |
2 |
overflow: scroll; |
3 |
}
|
Using scroll will always show a scrollbar, whether there’s overflowing content or not. Kinda like having a boat ready, even when there’s no flood!
auto
1 |
div { |
2 |
overflow: auto; |
3 |
}
|
Auto is the smart one in the bunch. It assesses the situation and if there’s overflowing content, it provides a scrollbar.
clip
The clip value behaves much like hidden, but with a little extra edge. Picture a container as a box with strict walls. When you set overflow: clip;, any content that tries to extend past the walls is clipped off, completely hidden from view, without any scrollbars in sight.
Here’s an example:
1 |
div { |
2 |
overflow: clip; |
3 |
}
|
But here’s where things get really interesting. The clip value is like a strict teacher with a soft spot. Along with it, there’s another property, overflow-clip-margin, which allows for a buffer zone around the clipping area. It’s like allowing the students a little wiggle room even in a disciplined environment. You can specify a margin where the clipping will occur, giving your content some breathing space before it’s cut off.
Check out how we can use it:
1 |
div { |
2 |
overflow: clip; |
3 |
overflow-clip-margin: 10px; /* Let’s give it some room! */ |
4 |
}
|
This way, the actual clipping happens 10px away from the box’s border, and not exactly at the edge.
clip and overflow-clip-margin as both are relative newcomers to CSS.Learn More
Did you know that when the overflow property is set to anything other than visible, it creates a new block formatting context? This can actually help in solving those mysteriously tricky layout issues, like clearing floats!
“Mastering the CSS overflow property is the key to crafting clean and controlled layouts.” - Chris Coyier
Relevant Tutorials
Official Specification and Browser Support
By
