CSS Overflow Property

The CSS overflow property comes into action when the content size is greater than the 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 shows within an element's box by the scroll mechanism when the content size is greater than the container size.
  • Overflow auto property automatically assigns a scroll bar if the content size is greater than the container size otherwise does not appear scroll bar.

Source Code

          div {
  width: 250px;
  height: 150px;
  border: 1px solid #cccccc;
}

div.scroll {
  overflow: scroll;
}

div.hidden {
  overflow: hidden;
}
        
Try it now

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

Web Tutorials

CSS Overflow Property
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4