1. css
  2. /properties
  3. /overflow-y



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.


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;


visibleThe default value. The content that overflows the vertical height of an element's content area is visible, even if it extends beyond the boundaries of its container.
hiddenThe content that overflows the vertical height of an element's content area is clipped and not visible to the user.
scrollA vertical scroll bar appears for the element if any content overflows its content area, allowing the user to scroll vertically to view the overflowed content.
autoThe browser determines whether or not to display a scrollbar, based on whether or not the content overflows the element's content area.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera