A Guide to Using the CSS Overflow Property

Discussing visible, hidden, scroll, auto, overflow-x, and overflow-y

Cem Eygi
Cem Eygi
Aug 12 · 4 min read
Photo by NordWood Themes on Unsplash

Sometimes, the content or a part of a webpage doesn’t fit and exceeds the borders of its container. In that case, CSS provides us with a solution with its overflow property so we can handle the overflow problem.

In this piece, I will show you how to use the overflow property with its different kinds of values.


The Overflow Property

The overflow property in CSS is used to clip, hide, or scroll an element's content when the content is bigger than its own specified area.

There are four different values of CSS overflow we can use:

overflow: visible | hidden | scroll | auto

We can set these values to horizontal, vertical, or both:

  • overflow-x: only horizontal.

Important: The overflow property only works when an element is a block-level element and has a defined height.

Let’s explain the details with an example.


Example

Consider that we have a <div> box with some text inside.

Normally, the text will fit inside the box because the height adjusts itself automatically based on the size of its content (length of the text):

So, no matter how long the text is, it will always fit its container (box).

However, sometimes elements may have a fixed-sized width or height. In this case, when the text is long enough, it will overflow:

In this example, the blue box has a fixed height of 80px, but the text is larger. Now, here, we can use the overflow property to fix this issue by hiding or adding a scroll bar, based on which value we use.


Visible

visible is the default value. If the content overflows, we will still be able to see it:


Hidden

When we set the overflow to hidden, it will clip the content and hide the rest:


Scroll

The scroll value will again clip the content but it will add a scroll bar so we can see the rest of the content by scrolling:


Auto

The auto value will also add a scroll bar but the user will see the scroll bar only when the content overflows.

  • overflow: scroll adds a scroll bar, regardless of whether we need it.

overflow-x and overflow-y

So, above I explained what overflow does and the values of it.

We can also use the same values for overflow-x and overflow-y. But what's the difference?

For example, let’s take the scroll value. When both the width and the height of the element are too small, overflow: scroll will add scroll bars both vertically & horizontally:

When we use overflow-x instead of overflow, the scroll bar will be added to the element only horizontally:

And, overflow-y adds the scroll bar only vertically:

We can even assign different values to overflow-x and overflow-y at the same time.

So, this is basically what overflow does. If you have any questions, don't hesitate to ask.

Thanks and see you soon!

Better Programming

Advice for programmers.

Cem Eygi

Written by

Cem Eygi

Front-end Developer — Visit Our Blog Website: www.codingdocs.com

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade