Free Web Development Online Tutorials, Learn to Code
Overflow CSS Class Code, Free CSS Tutorial for Beginners, Learn CSS StyleSheet

Overflow CSS Example

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

What is Overflow property?

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

How to use CSS for 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 */
    }
    

Comment
Name
Email
Website
Subscribe
CSS Style Examples