CSS overflow-y Property

Definition and Usage

The overflow-y property controls what happens when content overflows a block-level element’s top and bottom edges. You can let it paint outside, clip it, or allow vertical scrolling.

The initial value is visible. It is the vertical half of the overflow shorthand; pair it with overflow-x when axes must differ. The box needs a limited height or max-height or nothing overflows vertically.

CSS Syntax

Property Values

How to Use overflow-y

Constrain height first, then choose how vertical overflow should behave.

1. Give the element a limited height or max-height.
2. Put content inside that is taller than that limit.
3. Set overflow-y to auto, scroll, hidden, clip, or visible.
4. Set overflow-x separately when horizontal behavior must differ, or use the overflow shorthand for both axes.

Live Preview

A short box holds several lines. Change overflow-y and watch how the extra height behaves.

CSS Examples

Each snippet focuses on overflow-y. The fixed height is only there so content can overflow vertically. Use Try It Yourself for a live editor.

<style>
  div {
    height: 80px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div>
  This box is short. Extra lines overflow, so auto adds a scrollbar when needed.
</div>

<style>
  div {
    height: 80px;
    overflow-y: hidden;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div>
  Extra text is clipped at the edge of this box. There is no scrollbar.
</div>

<style>
  div {
    height: 80px;
    overflow-y: scroll;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div>
  This box always acts as a scroll container. Scrollbars typically stay visible.
</div>

Key Takeaways