overflow-y

The overflow-y property tells the browser how to handle content that exceeds the physical horizontal bounds of its container element. For example, you might have a box that is set to 300x300 pixels, with an image inside that is 500x500 pixels. In standard HTML, the image would display the entire 500x500 pixels. With the CSS 2 overflow-y property, you can add a scroll bar on the bottom that scrolls right and left.

• CSS 3

overflow-y: visible | hidden | scroll | auto | inherit

• visible
  The content is not clipped and can be seen outside the box.
• hidden
  The content is clipped on the bottom and cannot be seen.
• scroll
  The content is clipped on the bottom, but scroll bars are displayed to show the missing content.
• auto
  If there is extra content on the bottom, scroll bars will be shown, and if there is not, no scroll bars will display.
• inherit
  The element should have the same overflow-y value as the parent element.

• Chrome 1, 2, 3, 4, 5
• Firefox 2, 3
• Internet Explorer 6, 7, 8
• Netscape 8
• Opera 9, 10
• Safari 3, 4, 5

visible

Non-replaced block-level elements, table cells, and inline-block elements.

This property is not inherited.

• Visual

Add a scroll bar on the bottom for long content with overflow-y:auto; and overflow-x: hidden;

<div style="width:300px; height:300px; border: solid thin black; overflow-y: auto; overflow-x: hidden;">
... DIV contents
</div>

Overflow-x and Overflow-y Examples

• The various states of overflow-y do not conform well to the specification in all browsers. Be sure to test so that you are getting the results you expect. For example, hidden removes scroll bars and clips the content in Internet Explorer, but leaves scroll bars on the content in Chrome, Firefox, Opera, and Safari.
• In every browser I tested (Chrome, Firefox, Internet Explorer, Opera, and Safari), setting overflow-y changed the default for overflow-x to auto in some instances, even when I had not set overflow-x.
• Thus if you set overflow-y, you should set overflow-x as well, to get the exact results you want.
• Setting the value of overflow-y to scroll will leave the scroll bar on the box even if there isn’t enough content to warrant it.