Open In App

CSS Overflow

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars. The overflow contains the following property: 

  • visible: The content is not clipped and is visible outside the element box. 
  • Hidden: The overflow is clipped and the rest of the content is invisible.
  • Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical. 
  • Auto: It automatically adds a scrollbar whenever it is required.
  • Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges. 

Example:  In this example, we are using overflow: visible; property.

html




<!DOCTYPE>
<html>
 
<head>
    <style>
        p {
            width: 100px;
            height: 80px;
            border: 1px solid;
            overflow: visible;
        }
    </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: In this example, we are using overflow: hidden; property.

html




<!DOCTYPE>
<html>
 
<head>
    <style>
        p {
            width: 100px;
            height: 80px;
            border: 1px solid;
            overflow: hidden;
        }
    </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: In this example, we are using overflow: scroll; property.

html




<!DOCTYPE>
<html>
 
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: 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.
    </p>
 
</body>
 
</html>


Output: scroll

Example: In this example, we are the overflow: auto; property.

html




<!DOCTYPE>
<html>
 
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: auto;
        }
    </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: In this example, we are using the overflow-x and overflow-y properties.

html




<!DOCTYPE>
<html>
 
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow-x: scroll;
            overflow-y: hidden;
        }
    </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: 

Supported Browser:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 7
  • Safari 1


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