Open In App

How to set the overflow property to scroll in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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>


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.

HTML




<!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>


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

HTML




<!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>


Output: 



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads