CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 overflow-y Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The overflow-y CSS property specifies whether to clip content, render scroll bars or display overflow content when content overflows at the top and bottom edges of the element's content area.

The following table summarizes the usages context and the version history of this property.

Default value: visible
Applies to: Block, inline-block and flex containers
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

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

The example below shows the overflow-y property in action.

  • div {
  •     width: 400px;
  •     height: 300px;
  •     overflow-x: scroll;
  • }

Property Values

The following table describes the values of this property.

Value Description
visible Content is not clipped; it will be rendered outside the element's box, and may thus overlap other content. This is default value.
hidden Content that overflows the element's box is clipped and the rest of the content will be invisible.
scroll The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.
auto If content overflows the element's box it provides scrollbars to see the rest of the content.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element overflow-y property.

Browser Compatibility

The overflow-y property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1.5+
  • Google Chrome 1+
  • Internet Explorer 9+
  • Apple Safari 3+
  • Opera 9.5+
 

Warning:Internet Explorer 7 and earlier versions don't support the overflow-y property. IE8 however support this property but requires the Microsoft specific
-ms- prefix (e.g. -ms-overflow-y). Supported in IE9 and above.


Further Reading

See tutorial on: CSS Overflow.

Related properties: overflow, overflow-x, clip, word-wrap.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.