CSS Overflow

The CSS overflow property specifies how to handle the content when it overflows its block level container.We know that every single element on a page is a rectangular box and the size, positioning and behavior of these boxes are controlled via CSS.

Let's take an example: If you don't set the height of the box, it will grow as large as the content. But if you set a specific height or width of the box and the content inside cannot fit then what will happen. The CSS overflow property is used to overcome this problem. It specifies whether to clip content, render scroll bars, or just display content.

The overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.

The overflow property has the following values:

  • visible - Default. The overflow is not clipped. It renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
  • auto - If overflow is clipped, a scrollbar should be added to see the rest of the content
  • inherit - It inherits the property from its parent element.
  • initial - It is used to set the property to its initial value.

    • CSS Overflow Example

    Example -