CSS Overflow-y Managing Vertical Content Overflow

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.

| Initial value | visible | | Applies to | Block-containers, flex containers, and grid containers | | Inherited | no | | Computed value | As specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip | | Animation type | discrete |

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:

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.

See Also

To further enhance your knowledge and skills in managing content overflow, consider checking out these related properties and resources:

Related CSS Properties

• [clip]WebsiteUrl: Defines the visible portion of an element.
• [display]WebsiteUrl: Specifies the display behavior of an element.
• [text-overflow]WebsiteUrl: Defines how overflowed content that is not displayed is signaled to the user.
• [white-space]WebsiteUrl: Specifies how white-space inside an element is handled.

Related Resources

• [CSS Overflow Module Level 3]WebsiteUrl: The official specification for the CSS overflow properties.
• [CSS Overflow]WebsiteUrl: An overview of the CSS overflow module.
• [CSS Building Blocks: Overflowing Content]WebsiteUrl: A comprehensive guide to understanding and managing overflowing content.

Additional Learning

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