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:

Value Description Syntax
hidden It hides overflowing content overflow: hidden;
visible The content of an element flows out of the box overflow: visible;
scroll It displays scrollbars whether or not any content is actually clipped. overflow: scroll;
auto If 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:
<!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>