Overflow CSS Style Example

How to use css overflow style property, there are four overflow properties in css, like overflow scroll, overflow auto, overflow visible, overflow hidden.

.myDiv {
    overflow: scroll;
}

There are different overflow properties, let’s learn with example.

Overflow property indicates what will happen if content overflows any defined container size, means contents needs more space to fit.

Overflow CSS property indicates whether to clip content or to add scrollbars, There are different options for overflow property overflow : scroll, auto, visible, hidden

What is Overflow property?

Here is an example of CSS overflow syntax.

div { width: 200px; height: 50px; background-color: #eee; overflow: scroll;
}
CSS Overflow Syntax Example

this is how you can define overflow property value in CSS

div {
    overflow: auto;
}
div {
    overflow: scroll;
}
div {
    overflow: visible;
}
div {
    overflow: hidden;
} 
Different Values of Overflow Property with Example
  • overflow: scroll

    When property value is scroll, then a scrollbar is added, so you can scroll to see the full content

    overflow: scroll Example

    This is an example of overflow:scroll, as you can see the scroll bar appearing on both the side

  • overflow: auto

    When property value is auto, then a scrollbar will only appear when the content full

    overflow: auto Example

    This is an example of overflow:auto, as you can see the scroll bar not appearing on both the side, but when the context is full the scroll bar will appear, you must specify some width and or height of container to see the effect

  • overflow: visible

    This is Default value. It will push content outside the container (html element)

    This is an example of overflow:visible, Now if you notice the content is going outside the specified box


  • overflow: hidden

    Content outside the container will not be invisible

    This is an example of overflow:hidden, Now if you notice the content is not going to be visible outside the specified box


  • overflow-x and overflow-y

    We can also specify overflow property for X axis and Y axis, look at the example below

    div {
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: scroll; /* Add vertical scrollbar */
    }
    

Whenever you use this css overflow style to display any content inside div tag, make sure to apply appropriate padding and margin for that div, otherwise content appearance may look dirty.

CSS Style Examples