Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

Nothing is clipped, but scroll forces the scrollbars.

When 'scroll' is specified and the target medium is 'print', overflowing content may be printed.

In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.

IE6 does not create scroll bars unless the container has a layout.

The iPad does not support 'scroll'.

Try These

The three boxes are nested inside each other.

Watch This


Check This

<div id="aqua">aqua     <div id="yellow">yellow         <div id="pink">pink</div>     </div> </div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).