WebTrainingRoom Online Courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Overflow Property Syntax in CSS Example


What is overflow property?

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

CSS overflow 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 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
 
Overflow Property in CSS, CSS Tutorial




Consulting