CSS
Overflow

The overflow property is used to tell the browser what to do with content that doesn’t fit in a box.

Overflow Properties

The most commonly used values for this property are as follows:

ValueDescriptionSyntax
hiddenIt hides overflowing contentoverflow: hidden;
visibleThe content of an element flows out of the boxoverflow: visible;
scrollIt displays scrollbars whether or not any content is actually clipped.overflow: scroll;
autoIf the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.overflow: auto;

Overflow Example

Below examples will demonstrate the basic architecture of border

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          .overflow {
            background-color: #f5f2f0;
            width: 50%;
            height: 90%;
            overflow: scroll;
          }
        </style>
    </head>
  
    <body>
      <div class="overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    </body>
</html>