The CSS overflow Property
The overflow property controls what happens to content that is too big to fit in its area. It decides whether to clip the content or add scrollbars.
It can take these values:
visible— the default. The overflow is not clipped and spills outside the box.hidden— the overflow is clipped and the extra content is hidden.scroll— scrollbars are always added.auto— like scroll, but scrollbars are added only when needed.
CSS overflow: visible
By default the overflow is visible, so the content is not clipped and renders outside the element's box.
Example
The extra content spills outside the coral box.
Prompt
An HTML page showing overflow: visible.
In an internal
<style> block, give a <div> width 200px, height 65px, a coral background, and overflow visible. Put more text inside than fits, so the content spills outside the box.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: hidden
With hidden, the overflow is clipped and the rest of the content is hidden.
Example
The content that does not fit is clipped away.
Prompt
An HTML page showing overflow: hidden.
In an internal
<style> block, give a <div> width 200px, height 65px, a coral background, and overflow hidden. Put more text inside than fits, so the extra content is clipped and hidden.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: hidden;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: scroll
With scroll, both horizontal and vertical scrollbars are always added, so the user can scroll to see all the content.
Example
Scrollbars are always shown on the box.
Prompt
An HTML page showing overflow: scroll.
In an internal
<style> block, give a <div> width 200px, height 65px, a coral background, and overflow scroll, so scrollbars are always shown. Put more text inside than fits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: scroll;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
CSS overflow: auto
The auto value is like scroll, but it adds scrollbars only when they are needed.
Example
A scrollbar appears only because the content overflows.
Prompt
An HTML page showing overflow: auto.
In an internal
<style> block, give a <div> width 200px, height 65px, a coral background, and overflow auto, so scrollbars appear only when needed. Put more text inside than fits.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: auto;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>