overflow

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.

The element to which overflow:hidden is applied is also a positioning block, so it clips everything outside its region.

Try These

The three boxes are nested inside each other.

Watch This

aqua
yellow
pink

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