The overflow property determines how the exceeding content should be handled in a block-level formatting context. This property is generally used when we want to control more strictly the exact amount of content that must be visible inside a box. It basically accepts four values: visible (default), auto, hidden, scroll. The first value tells the browser that all exceeding content must be displayed, even when it overflows the box boundaries. The second value specifies that a browser should evaluate the situation and react accordingly. This means that a browser may (or may not) provide a scrolling mechanism to display the content. The third value hides all the exceeding content from sight. Finally, the fourth value forces the browser to provide a scrolling mechanism for handling the box content.
Let's start with a simple box:
.box {
width: 200px;
height: 100px;
background: silver;
border: thick solid gray;
padding: 5px;
}
Since we've provided a well-defined height to the box, all the exceeding content will be subject to the overflow property. Let's see the various cases.
visible
auto
hidden
scroll
As you can see, the situation changes from case to case. Generally speaking, it's sometimes preferable to use the auto value, especially in those cases that don't necessarily require a scrolling mechanism (e.g. textareas within forms). However, since this value leaves the browser with the responsibility of deciding what to do, we can get unexpected results in other cases. More precisely, with this value the browser may decide to display all the content or to provide a scrolling mechanism.