Overflow

As already explained, a block level element in CSS will, by default, take up all the horizontal space as well as all the vertical space it needs to fit the content inside of it. However, what happens if we define a vertical size that is not enough to contain the content? Let's have a look:

<style type="text/css">
#box1 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" style="background-color: GreenYellow;">
	Some content....
	More content...
	There's probably not enough room for it in this tiny box...
</div>

Try out this example and you will soon realize an important thing: Whenever you decide to set a fixed height on an element, you are responsible for making the content fit, and if it doesn't, it will simply "fall out" of its container. Obviously, you wouldn't notice it in this example if it wasn't for the distinct background colors (the green box on the white background), but it's still a very real problem that you will likely face as soon as you try to limit the size of your elements. So, what can be done about this?

The overflow property

With a little help from the overflow property, you can control what happens when an element has larger content than it can actually fit. There are several possible values and each of them will make your element behave differently when deciding what to do with overflowing content. Here's an example that will illustrate it:

<style type="text/css">
.box {
	width: 80px;
	height: 80px;
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box" style="overflow: visible;">
	Box 1 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: hidden;">
	Box 2 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: auto;">
	Box 3 - A box with many, many words in it, designed to cause overflow
</div>

<div class="box" style="overflow: scroll;">
	Box 4 - A box with many, many words in it, designed to cause overflow
</div>

The overflow has, per the current specification, four possible values: Visible, hidden, scroll and auto. The default is visible, which is the behavior we saw in the first example - the content simply just expands beyond the border of the container. This is the value used for the first box, but it could have been omitted, since it is the default value.

For the second box, we use the hidden value. This will cause content which expands beyond the borders to simply be hidden, making it invisible to the end-user. This can be practical in some cases, but in the case of a long text not fitting into an absolutely sized element, you would likely prefer the auto or scroll value.

The auto value, used on the third box, leaves it up to the browser how to handle the problem. Most browsers, at least desktop browsers, will handle overflow by adding scrollbar(s) if necessary. This is very often the value you will prefer, because it allows you to have an absolutely sized element and then only have scrollbars rendered if the content actually overflows.

At last, we have the scroll value. Most desktop browsers will handle this value by adding vertical and/or horizontal scrollbars to the element, if content overflows. Scrollbars are often what you desire, but with this value, most browsers will force scrollbars upon your element, no matter if the content overflows or not - for this reason, the auto value is usually preferred.

Summary

With absolutely sized elements, you are likely to run into problems with overflowing content. You can solve this by using the overflow property, as seen in the examples above, but you can also solve it by using relatively sized elements, for instance by adjusting the size of the parent element according to font size instead of an absolute value. This will help you in cases where your elements contains text and the user changes the font size in the browser. Which solution to go for very much depends on the situation though.