Overflow Property In CSS

Overflow Property In CSS

 
The Overflow property specifies that what we should do if the content of an Element Box Overflows. It has five property values:
  1. Hidden: In this the Overflow part of the content is Hidden and the rest will be shown.
  2. Visible: The Overflow will be visible. It renders outside the Element's Box
  3. Scroll: If the Overflow is Clipped, the scroll bar is added to see the rest of the content.
  4. Auto: If the Overflow is clipped, a scroll bar should be added automatically.
  5. Inherit: Specifies that the value of the overflow property should be inherited from the parent element
For Ex:
  1. <html>  
  2.   
  3.    <head>  
  4.       <style type="text/css">  
  5.       div.scroll   
  6.       {  
  7.          background-color: Pink;  
  8.          width: 100px;  
  9.          height: 100px;  
  10.          overflow: scroll;  
  11.       }  
  12.       </style>  
  13.    </head>  
  14.   
  15.    <body>  
  16.       <div class="scroll">The clients included businessmen from Mumbai and Delhi and a few Bollywood personalities, who wanted the agency to spy on either their spouses or rivals.</div>  
  17.    </body>  
  18.   
  19. </html>