CSS: overflow

Tweet

Working with containers in a web page could be tricky, especially if we need to manage large text. There's a CSS declaration which we need to fully understand in that matter: overflow.

When we create a container - let's call it "box" - the overflow declaration helps the browser to understand what to do with the eventual content that doesn't fit in the container. If the container has a fixed height, what will happens to the content that doesn't fit in the box?
When the box has not a fixed height, the content will fit in any case and the box will enlarge, giving the needed space to the content. When the height is fixed, we might need to use the overflow declaration.

The overflow declaration
There are four possible values for overflow:
1) visible
2) hidden
3) auto
4) scroll



When we assign "visible" to overflow, the content will be always visible, regardless the size of the box.

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

If set to "hidden", the content not fitting in the box, will not show and the box will appear as a hole in our page, showing just a part of what's behind. The overflowing content will not be accessible to the user.

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

With "auto", scrollbars are shown where necessary. It could be that the horizontal scrollbar is shown, or the vertical one... or both (if needed)

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

"scroll" always shows horizontal and vertical scrollbars, regardless what's inside the box. It means that even if the content perfectly fits the container, we will always have scrollbars.

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

Usually we set the overflow to "auto".

Overflow-x and overflow-y
We can even play with overflow-x and overflow-y. With the first, we can set the overflowing content behaviour in horizontal, with overflow-y in vertical.
When we need to force the vertical scrollbar only, we will set the overflow-y to "auto".

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

In the above example we have overflow-x: scroll and overflow-y: hidden.
As you can see the above two declarations are really helpful, giving us a full control of the situation.

That's it for today...
Have a nice day and happy coding.