How to set the overflow property to scroll in CSS ?
In this article, we will see how to set the overflow property to scroll in CSS. The overflow property is used to control the big content. It tells what to do when an element's content is too big to fit in the specified area. When the overflow property is set to scroll, the overflow is clipped, but a scrollbar is added to see the rest.
Example 1: In this example, we are using the overflow scroll.
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
color: green;
}
</style>
</head>
<body>
<h2>GEEKSFORGEEKS</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to
add scroll bars.
</p>
</body>
</html>
<html><head> <style> p { width: 120px; height: 100px; border: 1px solid; overflow: scroll; color: green; } </style></head><body> <h2>GEEKSFORGEEKS</h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p></body></html>Output:
Example 2: In this example, we have to use the overflow-x property to scroll. The overflow-x property is used when the content is overflown at the left and right edges.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
width: 40px;
border: 1px solid;
overflow-x: scroll;
}
</style>
</head>
<body>
<h2>GEEKSFORGEEKS</h2>
<p>
The CSS overflow controls big
content. It tells whether to
clip content or to add scroll
bars to show rest of the content.
</p>
</body>
</html>
<html><head> <style> p { color: green; width: 40px; border: 1px solid; overflow-x: scroll; } </style></head><body> <h2>GEEKSFORGEEKS</h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars to show rest of the content. </p></body></html>Output:
Example 3: In this example, we have used the overflow-y property to scroll. The overflow-y property is used when the content overflows at the top and bottom edges
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
height: 50px;
width: 200px;
border: 1px solid;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>GEEKSFORGEEKS</h2>
<p>
The CSS overflow controls big
content. It tells whether to
clip content or to add scroll
bars to show rest of the content.
</p>
</body>
</html>
<html><head> <style> p { color: green; height: 50px; width: 200px; border: 1px solid; overflow-y: scroll; } </style></head><body> <h2>GEEKSFORGEEKS</h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars to show rest of the content. </p></body></html>Output:
