How to make CSS overflow Property hidden or scroll

Definition and Usage

The overflow property is used to make scrolling hidden or enable .This property mostly use to add scrollbars when an element's content is too big and not fit in a specified area.

Note: The overflow is only works for block elements with a specified height.

Overflow: Scroll

Set the overflow property to scroll , scrollbar is added to scroll inside the box

Example

div {
    overflow: scroll;
}

Overflow: Hidden

Set the overflow property to hidden , the rest of the content will hidden 

Example

div {
    overflow: hidden ;
}

Overflow: Visible

Set the overflow property to visible , meaning it renders outside the element's box :

Example

div {
    overflow: visible ;
}

Overflow: Auto

Set the overflow property to auto , it work something like scroll but only it add scrollbars when necessary :-

Example

div {
    overflow: auto ;
}

!important Rule

Use !important rule so then css will always applied .

Example

body {
    overflow: hidden !important;
}

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

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