CSS overflow property

The overflow property specifies what should happen if an element's content is too big to fit in a specified element.

Overflow property has multiple values. For example, 

Overflow Value:-

1. overflow:visible; This is the default value for overflow property. If the content is big to fit in the element, it renders the content outside the element's box. Meaning that the text or element is not clipped.
   
   overflow:visible

   This is a child element.

   Lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

   Try it Yourself »
2. overflow:auto; is used to add a scrollbar whenever a box's content is too large to fit the content in the box (element).
   overflow auto

   This is a child element.

   Lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

   Try it Yourself »
The auto value is similar to scroll . But it adds scrollbars only whenever it's necessary.
3. The overflow:hidden; property is used to prevent scrollbars from showing up, even when they're necessary.
   overflow hidden

   This is a child element.

   Lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

   Try it Yourself »
4. overflow:scroll; This is similar to auto value. This will add a scrollbar both horizontally and vertically.
   overflow:scroll

   This is a child element.

   Lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

   Try it Yourself »
5. overflow-x:auto; is used for adding a horizontal scrollbar whenever it's needed or required.
6. overflow-x:hidden; prevents to add horizontal scrollbar even when it's required.
7. overflow-y:auto; is used for adding a vertical scrollbar.
8. overflow-y:hidden; is used to prevent vertical scrollbar from showing up.