Understanding overflow in CSS

If you have written CSS for a while, you'd probably encountered overflow property. It governs the display of overflow content in a container.

Let's have an example. I have a div that is 300px width and 100px height like this:

#container {
 border: 2px solid blue;
 height: 100px;
 width: 300px;  
}

Let's put some text inside:

Everything is fine. Let's put some more text:

As you can see, when there is more content than the capacity of the container, the text is overflowed.

But is this the only behavior? Obviously not.

Overflow possible values

There are four possible values of overflow:

1. visible (default value)
2. hidden (overflowed content will be clipped)
3. scroll (scroll bars will be added to the container No matter the content's length)
4. auto (scroll bars will be added when necessary)

Overflow values in action

Let's have a look at overflow values in action

visible

This is the default value. So, I'll reuse the above screenshot:

hidden

scroll

When overflow occurs:

When there is no overflow:

=> there are scroll bars no matter what :O

auto

When there is no overflow:

When overflow occurs:

overflow-x and overflow-y

You are not limited to using overflow only. You can use overflow-x and overflow-y to set the behavior on these axis separately (using the same value as above).