The overflow property is used to deal with how content that is larger than a defined box, is displayed.
The overflow property can be assigned the following values.
hidden: The content that overflows the box will be hidden.
auto: scrollbars will be displayed along the box if the content is larger than the box.
visible: the content is displayed outside the box model.
scroll: scrollbars are always shown, irrespective of the content being smaller or larger than the box model.
Example:
Code:
<html>
<head>
<title>Overflow Samples</title>
<style>
.overhidden {
width: 100px;
overflow: hidden;
background: #000;
}
.overauto {
width: 100px;
overflow: auto;
background: #000;
}
.overvisible {
width: 100px;
overflow: visible;
background: #000;
}
.overscroll {
width: 100px;
overflow: scroll;
background: #000;
}
</style>
</head>
<body>
Normal Image:<br>
<img src="http://www.devlib.org/images/logo.png"><br>
Overflow = hidden:<br>
<div class="overhidden">
<img src="http://www.devlib.org/images/logo.png">
</div>
Overflow = auto:<br>
<div class="overauto">
<img src="http://www.devlib.org/images/logo.png">
</div>
Overflow = visible:<br>
<div class="overvisible">
<img src="http://www.devlib.org/images/logo.png">
</div>
Overflow = scroll:<br>
<div class="overscroll">
<img src="http://www.devlib.org/images/logo.png">
</div>
</body>
</html> 
CSS Overflow 
