overflow

div.test { overflow: visible;}
div.test1 { overflow: hidden;}
div.test2 { overflow: scroll;}
div.test3 { overflow: auto;}

Value	Description
visible	Content overflows and is displayed. This 'visible' is the initial value.
hidden	The overflowing part is not displayed.
scroll	The overflowing part becomes scrollable.
auto	Leaves the display of overflowing content to the browser. In most browsers, this behaves the same as 'scroll'.

<div style="overflow: visible; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">This is a div element with a width of 200px and height of 100px (red border). The overflowing part is displayed as-is. Text text text text text text text.</div>

<div style="overflow: hidden; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">This is a div element with a width of 200px and height of 100px (red border). The overflowing part is not displayed. Text text text text text text text.</div>

<div style="overflow: scroll; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">This is a div element with a width of 200px and height of 100px (red border). The overflowing part becomes scrollable. Text text text text text text text.</div>

<div style="overflow: auto; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">This is a div element with a width of 200px and height of 100px (red border). In most browsers, the overflowing part becomes scrollable. Text text text text text text text.</div>

※ Version data is based on MDN.

Specifies how overflowing content is displayed.

In most browsers, there is no visual difference between specifying 'auto' and 'scroll'.

Another use of the 'overflow' property is a technique where specifying any value other than 'visible' causes the parent element to include floated child elements in its own height calculation. This technique is commonly used alongside 'clearfix', so refer to the 'float' property description as well.

<div style="overflow: auto; border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">This is a div element. 'float: left' and 'width: 200px' are specified.</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element. 'float: right' and 'width: 200px' are specified.</div>
</div>