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

<!doctype html>  

        <style type="text/css">
          .overflow {
            background-color: #f5f2f0;
            width: 50%;
            height: 90%;
            overflow: scroll;
      <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>