CSS overflow Property

Definition and Usage

The overflow property is a shorthand for overflow-x and overflow-y. It controls what happens when content does not fit inside an element’s padding box.

The initial value is visible: content can paint outside the box. Other keywords clip the content, add scrollbars, or both. One keyword sets both axes; two keywords set horizontal then vertical. The box must be size-constrained (for example with height) or there is nothing to overflow.

CSS Syntax

One value sets both axes. Two values set overflow-x then overflow-y.

Property Values

How to Use overflow

Constrain the box first, then choose how overflow should behave.

1. Give the element a limited size, usually with height, max-height, or width.
2. Put content inside that is larger than that size.
3. Set overflow to auto, scroll, hidden, clip, or visible.
4. Use two values, or the overflow-x / overflow-y longhands, when axes must differ.

Live Preview

A short fixed box holds long text. Change overflow and watch how the extra lines behave.

CSS Examples

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

<style>
  div {
    width: 200px;
    height: 80px;
    overflow: 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 {
    width: 200px;
    height: 80px;
    overflow: 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 {
    width: 200px;
    height: 80px;
    overflow: scroll;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

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

Key Takeaways