CSS Overflow-y Managing Vertical Content Overflow

Discover the CSS overflow-y property for managing vertical content overflow.

Learn about its use cases, available options like visible, hidden, scroll, auto, and clip, and how to implement them effectively.

`overflow-y` Property in CSS

The overflow-y property in CSS controls how content is displayed when it overflows the vertical boundaries of an element. It can clip the content, hide it, or add scroll bars, depending on the value assigned. This property is essential for web developers to manage content overflow effectively.

Syntax

The syntax for the overflow-y property is simple:

overflow-y: value;

You can use the following keyword values:

visible: Content is visible outside the element’s boundaries.
hidden: Content is clipped and invisible.
clip: Content is clipped at the element’s edge, no scrolling allowed.
scroll: Always shows scroll bars.
auto: Shows scroll bars only if the content overflows.

Additionally, you can use global values like inherit, initial, revert, revert-layer, and unset.

Values

The overflow-y property supports several values:

visible: Content is not clipped and can overflow.
hidden: Content is clipped and hidden.
clip: Content is clipped, no scrolling.
scroll: Always shows scroll bars.
auto: Shows scroll bars if content overflows.

Global values:

inherit: Inherits value from the parent element.
initial: Sets to default value (visible).
revert: Resets to inherited value.
revert-layer: Resets to inherited value if not specified at a lower layer.
unset: Resets to default value if not inherited.

Examples

Here are some examples to demonstrate the overflow-y property:

HTML

<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — adds a scrollbar only if the content overflows
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 12px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 12px;
}

Formal Definition

The overflow-y property is formally defined in the CSS Overflow Module Level 3.

Formal Syntax

overflow-y = visible | hidden | clip | scroll | auto

visible: Content is not clipped and may be visible outside the element’s padding box.
hidden: Content is clipped to fit within the element’s padding box.
clip: Content is clipped at the element’s overflow clip edge.
scroll: Content is clipped and scroll bars are always displayed.
auto: Content is clipped and scroll bars are displayed if the content overflows.

Browser Compatibility

The overflow-y property in CSS is widely supported across modern web browsers. Here’s a quick overview:

Browser	Version	Release Date
Chrome	1.0	December 2008
Firefox	1.0	November 2004
Internet Explorer	4.0	September 1997
Edge	12.0	July 2015
Opera	7.0	January 2003
Safari	1.0	June 2003

Ensuring Compatibility

To ensure that the overflow-y property works consistently across all browsers, test your web designs on multiple platforms and devices. This helps identify any potential issues with older browser versions.

Additional Learning

[MDN Web Docs]WebsiteUrl: A comprehensive resource for web developers.
[W3C CSS Specifications]WebsiteUrl: The official specifications and recommendations for CSS.