CSS Overflow

The CSS overflow comes into action when content size is greater than container size. In this case, the CSS overflow property can do the following actions.

The CSS overflow default value is visible. It does not clip the larger content and shows the large content even after the container's box and might overlap other content.
The hidden property of overflow clips the content that overflows the element's box and shows the content that is inside the element's box.
The overflow scroll property does not clip any content and show within an element's box by scroll mechanism when the content size is greater than container size.
Overflow auto property automatically assigns scroll bar if the content size is greater than container size otherwise does not appear scroll bar.

Basic Syntax

General Syntax

     div.hidden {
 overflow: hidden;
}

Source Code

      
         div {
 width: 250px;
 height: 150px;
 border: 1px solid #cccccc;
}
div.scroll {
 overflow: scroll;
}
div.hidden {
 overflow: hidden;
}

Code Explanation

Note When the content size is larger than the container size. In this case, content is displayed outside the container. Therefore CSS overflow is used to deal with the overflow content.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS