CSS Overflow

The CSS overflow property specifies how to handle the contents that is too big to fit into an area.

CSS Overflow Property Values

• auto: Specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
• hidden: Specifies that the overflow is clipped, and rest of the content will be invisible.
• inherit: Inherits the property from its parent element.
• initial: Set the property to its initial value.
• scroll: Specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
• visible: Specifies that overflow is not clipped. it renders outside the element's box.this is a default value.

overflow:visible

The overflow is visible property work by default; That means it is not clipped and it renders outside the element's box.

Example of overflow: visible

.p_visible {
     background-color: pink;
     height: 50px;
     width: 150px;
     overflow: visible;
  }

Output

Example of overflow: scroll

.p_scroll {
     background-color: pink;
     height: 60px;
     width: 200px;
     overflow: scroll;
  }

Output