CSS Overflow Property

CSS Overflow Property

The CSS overflow property 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.

example

Example

Source Code

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