A Guide to Use CSS Overflow Property

Coding Docs CSS

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

In this post, I will show you how to use the overflow property with its different kind of values…


So the overflow property in CSS is being used to clip, hide or scroll an element’s content when the content is bigger than its own specified area. There are 4 different values of CSS Overflow that we can use:

overflow: visible | hidden | scroll | auto

We can even set these values horizontally, vertically or both:

  • overflow-x : only horizontal
  • overflow-y : only vertical
  • overflow : both

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…


Consider 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 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:

div {
   background: #34ebe1;
   width: 250px;
   height: 80px;
   overflow: visible;
 }

Hidden

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

div {
   background: #34ebe1;
   width: 250px;
   height: 80px;
   overflow: hidden;
 }

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:

div {
   background: #34ebe1;
   width: 250px;
   height: 80px;
   overflow: scroll;
 }

Auto

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

div {
   background: #34ebe1;
   width: 250px;
   height: 80px;
   overflow: auto;
 }

overflow: scroll adds a scroll bar regardless we need it, whereas overflow: auto adds the scroll bar only when it is necessary.

overflow-x & overflow-y

So above I’ve explained what overflow does and the values of it. We can also use the same values both for overflow-x and overflow-y . But what’s the difference?

For example, let’s take the scroll value.

When both width & height of the element is too small, overflow: scroll will add scroll bars both vertically & horizontally:

div {
   background: #34ebe1;
   width: 70px;
   height: 80px;
   overflow: scroll;
 }

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

div {
   background: #34ebe1;
   width: 70px;
   height: 80px;
   overflow-x: scroll;
   overflow-y: hidden;
 }

And overflow-y adds the scroll bar only vertically:

div {
   background: #34ebe1;
   width: 70px;
   height: 80px;
   overflow-x: hidden;
   overflow-y: scroll;
 }

We can even assign overflow-x and overflow-y different values at once.


So this is basically what overflow does. If you have any questions, don’t hesitate to ask in the comment section and if you like to learn more about CSS & Web Development, subscribe to our newsletter.

Thanks & see you guys soon!

6 comments on “A Guide to Use CSS Overflow Property

  1. Nіce post. Ι was cheϲking constantly thiѕ blog and I’m impreѕsed!

    Extremeⅼy helpful information specially the last part 🙂 I carе for such information a lot.

    I wаs seeқing this сertain infо for a long time.

    Thank you and good luck.

  2. You really make it seem so easy with your presentation but I find
    this topic to be actually something which I think I would never understand.
    It seems too complex and very broad for me. I’m looking forward for your next post, I’ll try to get the
    hang of it!

Leave a Reply

Your email address will not be published. Required fields are marked *