CSS Overflow
The overflow property decides what happens when content is too big for its box: show it, clip it, or add scrollbars.
When an element has a fixed height or width and its content does not fit, something has to give. The overflow property lets you choose whether the extra content spills out, gets hidden, or becomes scrollable.
The four values
A scrollable box
<!DOCTYPE html>
<html>
<head>
<style>
.panel {
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div class="panel">
<p>Line one of the panel content.</p>
<p>Line two of the panel content.</p>
<p>Line three of the panel content.</p>
<p>Line four of the panel content.</p>
</div>
</body>
</html>Clipping with hidden
overflow: hidden simply cuts off anything beyond the box. It is handy for cropping images to a fixed frame or preventing a stray element from breaking your layout.
Cropping to a frame
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
width: 120px;
height: 120px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="mountain.jpg" alt="Mountain landscape">
</div>
</body>
</html>Note: Prefer auto over scroll for most cases. scroll shows an empty, disabled scrollbar even when everything fits, which looks cluttered.
Note: overflow only kicks in when the element is actually constrained, usually by a set height. On an element free to grow, there is nothing to overflow.
To control horizontal and vertical overflow independently, use the dedicated axis properties. See CSS Overflow X and Y.
Exercise: CSS Overflow
What is the default value of the overflow property?
