CSS Overflow

It's not uncommon for content to exceed their container, for example long text.

The overflow property handles these situations.

Options include clipping content, adding scrollbars, and more.

Example

#

By default, overflowing content is visible.
The text under the container is the overflow text.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<style>
  .content {
    border: 1px solid steelblue;
    background-color: aliceblue;
    padding: 15px;
    height: 155px;
    max-width: 450px;
  }
</style>

<div class="content">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

Note:  Not specifying an overflow value is the same as setting overflow:visible.


The overflow property

The overflow property defines how content that exceeds the container is displayed.

The overflow property accepts any of the following values:

  • visible - default, all content is visible, including overflow content
  • hidden - only shows what fits in the container. The rest is clipped and invisible
  • scroll - only shows what fits in the container. The rest is visible thru scrolling
  • auto - similar to scroll, but it adds scrollbars only when necessary

The effect of overflow:visible can be seen in the example above.


Overflow : hidden

#

With overflow:hidden the overflowing content gets clipped.

The clipped parts are hidden and cannot be seen.

This example demonstrates that overflow content is hidden.

<style>
  .hidden {
    border: 1px solid steelblue;
    background-color: aliceblue;
    padding: 15px;
    height: 155px;
    max-width: 450px;
    overflow: hidden;
  }
</style>

<div class="hidden">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

Overflow : scroll

#

With overflow:scroll the container gets two scrollbars.

The scrollbars are always visible, even if content does not overflow.

A container with scrollbars. All content is visible or can be made visible.

<style>
  .hidden {
    border: 1px solid steelblue;
    background-color: aliceblue;
    padding: 15px;
    height: 155px;
    max-width: 450px;
    overflow: scroll;
  }
</style>

<div class="hidden">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

Overflow : auto

#

With overflow:auto the container may add scrollbars.

A scrollbar is added only if the content exceeds the container.

This content exceeds the container, so a vertical scrollbar appears.

<style>
  .hidden {
    border: 1px solid steelblue;
    background-color: aliceblue;
    padding: 15px;
    height: 155px;
    max-width: 450px;
    overflow: auto;
  }
</style>

<div class="hidden">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

Overflow-x, overflow-y

The overflow-x and overflow-y properties handle overflow in only one direction.

overflow-x specifies horizontal content overflow.

overflow-y specifies vertical content overflow.

In this example, overflow is handled differently for each direction.

<style>
  .hidden {
    border: 1px solid steelblue;
    background-color: aliceblue;
    padding: 15px;
    height: 155px;
    max-width: 450px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>

<div class="hidden">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.
</div>

CSS Overflow Properties

These are the properties used for overflow.

Property Description
overflow Specifies what happens if content exceeds its container
overflow-x Specifies what happens if content exceeds left and right sides of its container
overflow-y Specifies what happens if content exceeds the top and bottom of its container

You may also like

Guides