Skip to content
Related Articles

Related Articles

Improve Article

How to set the overflow property to scroll in CSS ?

  • Last Updated : 03 Jun, 2021
Geek Week

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: 

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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :