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.
overflow-y in CSS Versions:
overflow-y: visible | hidden | scroll | auto | inherit
The content is not clipped and can be seen outside the box.
The content is clipped on the bottom and cannot be seen.
The content is clipped on the bottom, but scroll bars are displayed to show the missing content.
If there is extra content on the bottom, scroll bars will be shown, and if there is not, no scroll bars will display.
The element should have the same overflow-y value as the parent element.
overflow-y Browser Support:
overflow-y Initial/Default Value:
overflow-y Applies To:
This property is not inherited.
overflow-y Media Type:
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
overflow Special Notes:
- 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,
hiddenremoves 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
autoin 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
scrollwill leave the scroll bar on the box even if there isn’t enough content to warrant it.