CSS overflow-y Property

What You’ll Learn

The overflow-y property controls what happens when content is taller than its container. It is essential for vertical scroll areas, fixed-height panels, chat lists, and modal bodies.

Introduction

The overflow-y property in CSS controls what happens to the content when it overflows the vertical bounds of its container.

This property is particularly useful for managing vertical scrolling and ensuring that overflowing content is handled gracefully inside fixed-height layouts.

It applies only to the vertical axis, as opposed to the more general overflow property, which sets behavior for both axes at once.

Definition and Usage

Use overflow-y on elements with a defined height when content might exceed that height, such as chat message lists, modal bodies, sidebar panels, and scrollable article previews.

overflow-y: auto is the most common choice because a vertical scrollbar appears only when content actually overflows.

📝 Syntax

The syntax for the overflow-y property is as follows:

element {
  overflow-y: value;
}

Here, value can be one of the predefined keywords described below.

Basic Example

.container {
  height: 200px;
  overflow-y: auto;
}

Syntax Rules

• Accepted values: visible, hidden, scroll, and auto.
• The container usually needs a set height or max-height for vertical overflow to matter.
• overflow-y controls only the vertical axis; pair it with overflow-x for horizontal behavior.
• auto is usually better than scroll when you want scrollbars only when needed.

🎯 Default Value

The default value of the overflow-y property is visible. This means that if the content overflows vertically, it will not be clipped and will instead be visible beyond the bounds of its container.

Change it when you want to clip tall content or add vertical scrolling inside a fixed-height box.

💎 Property Values

Examples Gallery

Scroll tall content vertically, clip overflow, compare scrollbar behavior, and build chat-style message lists.

<style>
  .overflow-box {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    overflow-y: scroll;
  }
</style>

<div class="overflow-box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non nulla ut nunc fermentum dapibus.</p>
  <p>Maecenas et ligula sit amet neque consequat aliquet. Nullam varius eros at eros efficitur.</p>
</div>

.panel {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 1rem;
}

.card {
  height: 120px;
  overflow-y: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.chat-messages {
  height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
}

overflow vs overflow-x vs overflow-y

The shorthand overflow sets both axes at once. Use overflow-x and overflow-y when horizontal and vertical behavior should differ.

.modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

♿ Accessibility

• Do not hide important content — Using overflow-y: hidden can remove information from view with no way to scroll to it.
• Ensure scrollable areas are usable — Keyboard users should be able to scroll focusable content inside vertical overflow containers.
• Prefer auto over scroll — when you want vertical scrollbars only when content actually overflows.
• Test small screens — Vertical overflow behavior affects modal dialogs, sidebars, and mobile panel layouts.

💡 Best Practices