We can use CSS overflow property to manage/handle the overflowing content of an element. This property allows user to clip content, provide scrollbars to view clipped content, render content outside the container thus the name overflow.
Syntax
Following is the syntax for CSS Overflow property −
Selector {
overflow: /*value*/
}Let us see an example for CSS overflow property −
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 110px;
overflow: scroll;
}
</style></head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>Output
Before clicking ‘Remove Scrollbars’ button −
After clicking ‘Remove Scrollbars’ button −
Let’s see another example for the CSS overflow property −
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>Output
Before clicking any button −
After clicking ‘Remove Scrollbars’ button −
