CSS Reference Guide: overflow

The CSS overflow property specifies the way an element’s content overflows or grows out of its parent container. Overflows can occur in both the x and y directions of an element when the width or height of an element is bigger than its enclosing parent element.

Jump ahead:

• Values
  • visible
  • hidden
  • auto
  • scroll
  • clip
• overflow properties
  • overflow-x
  • overflow-y
• Using both overflow-x and overflow-y

---

Say we have a parent div element of width 300px and height 700px, and a child element of width 500px and height 900px. We will see that the child div element overflows its parent element in both the x and y directions.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;
}

Review a live example below:

See the Pen
css overflow by Chidume David (@philipsz-davido)
on CodePen.

.childEl will overflow both the x- and y-axes by 200px.

---

Values

The overflow property has values it can use to handle the situation above: visible, hidden, auto, scroll, and clip.

visible

The default value of overflow. This value makes the overflow visible. It will not clip any of the overflows.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow: visible;
}

The overflowing content of .childEl will not be clipped.

---

hidden

This value clips or hides the overflowing area/content of the child element.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow: hidden;
}

The overflowing content of .childEl above will be hidden.

---

auto

This hides and provides scrollbars to overflowing content in the element. The scroll bars appear once the content overflows.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow: auto;
}

Scroll bars will appear on .childEl.

If we set the width not to overflow its parent:

...
.childEl {
    width: 200px;
    ...

    overflow: auto;
}

Then, the scroll bar will not appear on the bottom because nothing is overflowing there. Scroll bars will only be visible on the right side.

---

scroll

This hides or clips the overflowing content but provide scroll bars so the overflowing can be scrolled to make them visible or to see the rest of the content. Scroll bars automatically appear in the element even if the content does not overflow.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow: scroll;
}

The overflowing content of .childEl will be hidden and scroll bars will appear on its right and bottom. Using a mouse or keys we can scroll to reveal the overflowed content.

---

clip

Similar to hidden, with the exception that the overflowing content with hidden can be scrolled programmatically. Not so with clip, which forbids all scrolling.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow: clip;
}

The overflowing content of .childEl will be hidden and cannot be scrolled to using JS.

N.B., overflow: clip; is still experimental at the time of writing and remains unsupported by most major browsers.

---

overflow properties

overflow is a shorthand for overflow-x and overflow-y, which means that when we use overflow , we are setting both the overflow-x and overflow-y properties.

overflow can have one or two values. If it has only one value, then overflow-x and overflow-y both take the value.

If we had overflow: auto;, it would be equal to:

overflow-x: auto;
overflow-y: auto;

If there are two values, the first value becomes overflow-x and the second value is overflow-y.

If we had overflow: auto hidden;, it would be equal to:

overflow-x: auto;
overflow-y: hidden;

---

overflow-x

This targets the left and right sides of the element and controls how the overflowing content is handled.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow-x: hidden;
}

The example above will hide the overflowing content of .childEl on the right side. The overflowing content of its bottom portion is not affected by the rule.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow-x: scroll;
}

The example above will add a scroll bar only to the right side of .childEl

---

overflow-y

This targets the top and bottom portions of the element and controls how the overflowing content is handled.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow-y: hidden;
}

This will only hide the overflowing bottom portion of .childEl

---

Using both overflow-x and overflow-y

Both properties can be used together to affect the top and bottom portions of the content.

.parentEl {
    width: 300px;
    height: 700px;
    border: 1px solid orangered;
}

.childEl {
    width: 500px;
    height: 900px;
    border: 1px solid black;

    overflow-x: hidden;
    overflow-y: scroll;
}

This hides the overflowing right side and adds a scroll bar to the bottom portion of .childEl.