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