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.

There is nothing much going on here. The overflow declaration does not do anything beside establishing a new block formatting context.

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).