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.
By default, overflowing content is visible.
The text under the container is the overflow text.
<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 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 contenthidden - only shows what fits in the container. The rest is clipped and invisiblescroll - only shows what fits in the container. The rest is visible thru scrollingauto - similar to scroll, but it adds scrollbars only when necessaryThe effect of overflow:visible can be seen in the example above.
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>
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>
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>
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>
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 |
