overflow-y

Definition

The "overflow-y" CSS property sets how an element should handle overflow vertically when content overflows its content area. It controls whether or not the element should display a vertical scrollbar, clip the overflowed content, or make it visible outside the element's boundaries.

Examples

Hide vertical overflow:

.container {
  overflow-y: hidden;
}

Add a vertical scroll bar for overflow:

.container {
  overflow-y: scroll;
}

Display overflowed content outside the element's boundaries:

.container {
  overflow-y: visible;
}

Values

Best Practices

• Use "overflow-y" to control the handling of vertical overflow for an element.
• Avoid hiding overflowed content entirely with "overflow-y: hidden", as this can result in content being cut off and potentially making it difficult for users to understand the full context.
• Use "overflow-y: scroll" to add a scrollbar to an element with vertical overflow. This ensures that all content is still accessible, even if it overflows the container.
• Use "overflow-y: auto" if you want the browser to determine whether or not to display a scrollbar based on the content.
• Avoid using "overflow-y: visible" as it can cause content to spill outside of its container and overlap other elements on the page.
• Test your CSS across different browsers and screen sizes to ensure that the "overflow-y" property behaves consistently and as expected.
• Consider using the "overflow-wrap" property to control how long words are wrapped when they overflow the container.

Browser Compatibility