Learn & Understand CSS Overflow Property

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.

Let us understand CSS overflow concept with the help of an example .

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

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com