ABOUT
The overflow-y property can be used to show the overflow content on the top and/or bottom edges, clip it (hide any excess content that’s outside the element’s boundaries), or add vertical scroll bars to the element so that the overflow content can be seen on scroll. The overflow-y property can take one of four possible values: visible (which is the default value), hidden (which clips the content outside the boundaries of the element), scroll (which adds a vertical scroll bar to the element whether or not it needs it), and auto (which leaves it up to the browser to decide whether or not to add scroll bars as necessary).
TRAITS
Without an explicit height, the element would just expand to fit the content inside it (unless the content is positioned absolutely or fixed. See the position entry for details). Same applies for horizontal content. The element would normally expand horizontally to fit its content. If the element has an explicit width set, then if it contains content that has a width greater than the element’s width—for example, an image—the content would overflow the element.
IDEALS
How the overflow is handled is specified using the overflow property. If an element width explicit height and width contains only text content, the text would not overflow the element horizontally because it would normally just wrap; but it can overflow it vertically. The following image shows an example of an element that contains only text. Each of the four cases shows the result of applying one of the four possible overflow values.
FLAWS
Using the overflow property you can specify whether to display the overflow content (it may overlap other elements on the page), or clip it, or render scroll bars on the element so that the content inside the element would scroll. The default value is visible, which means that overflow content is usually visible. The overflow property can take three more values: hidden, scroll, and auto.