CSS Overflows

In this unit we will see how CSS works when content within an element tends to overflow out of it. We will look at overflows with scrollbars, word wrapping techniques and much more essentially related to all these overflows cases.

This unit is fairly shorter as compared to the others and will take at most just a few minutes to get the hang of! Yes it's true! Anyways, this excludes the practice time which is way more than just a few minutes!

So let's start off with overflows.

When an element can't fit the content within it, an overflow occurs i.e content goes out of the element.

Consider the following illustration of an overflow:

<div>Disproportionation is a long word and it might overflow out of this element</div>

div {
    width: 100px;
    height: 50px;
    background-color: gold;
}

As you can see the text within the div flows out of it i.e overflows. The element simply can't fit in the content within its area.

If we specify a width only and remove the declaration for height, the height will adjust freely as illustrated below to fit the content in.

However in this case, even removing a custom height doesn't stop the content from overflowing. This is because of the word Disproportionation.. - it is longer than the width of the div and hence can't be condensed in. CSS can't break a word, by default, but we can get it to do this, as we will see later.

So this was a simple illustration of an overflow. As you might agree, overflows look bad - they compromise at the perfection of a design and hence need to be rectified before moving on with other concerns in the design process.

So how to solve it?

To solve overflows in CSS, we have the overflow property. It specifies what to do in the case of an overflow. The values include:

1. scroll - adds a scroll bar, always, to allow any overflow to be scrolled
2. hidden - hides off the overflowing content.
3. auto - adds a scroll bar, only when needed, to allow the overflow to be scrolled.
4. visible - is the default, and makes any overflow visible.

Let's see how all of these values work in the same overflow example we saw above. We'll start with scroll:

scroll - add scroll bars

div {
    overflow: scroll;
}

Here, instead of the content flowing out, it is put into the div and allowed to be scrolled through. If you are on a desktop device you might be able to see a scroll bar, on the div element however on a mobile device there is no such scrollbar present.

Let's now see how hidden works.

hidden - hide the overflow

overflow: hidden serves to hide any overflowing content within an element, or as you might remember from the CSS Floating chapter, to get an element fit across its floated children. For now we are only concerned with the former part i.e hide any overflowing content.

Consider the example below demonstrating a hidden overflow:

div {
    overflow: hidden;
}

As you can see, the overflowing portion is simply cut-off from the final result. No scroll bars, no reduction in the content's area; just chop off the overflow.

auto - scroll overflow when needed

Unlike scroll, which adds a scroll bar always regardless of whether an overflow occurs, this value adds it only when an overflow occurs. auto automatically detects any overflow, and then rectifies it accordingly.

See the example below to get a better idea.

Here, since the content does overflow auto adds a scroll bar to deal with it.

div {
    overflow: auto;
}

In contrast, here the content doesn't overflow and likewise no scroll bars are given to the div:

div {
    overflow: auto;
}

visible - any overflow is visible

The default value for overflow, visible makes the overflow visible, i.e everything is shown flowing out of the element.

Now you already know how visible works but just for the sake of an example consider the following:

div {
    overflow: visible;
}

Extending the examples shown above, what if we ask you that we want to scroll the overflows horizontally whereas hide them vertically. In other words what if we wanted to set overflow: scroll on the horizontal axis and overflow: hidden on the vertical one?

Well we can use the properties overflow-x and overflow-y or the same overflow property with two parameters to get this accomplished.

overflow-x states the behavior of overflows in the x-direction i.e horizontal direction.

overflow-y states the behavior of overflows in the y-direction i.e vertical direction.

Following we solve the problem discussed at the start of this section using these two properties:

div {
    overflow-x: scroll;
    overflow-y: hidden;
}

As you can distinguish by looking at this example, only the horizontal overflow is scrollable - the vertical is chopped off.