Overflow

In CSS, an "overflow" property is used to control how content that overflows the boundaries of a container should be displayed.
It is often used when the content within an element is too large to fit within the defined dimensions of that element.

CSS overflow property values:

Value	Description
visible	It specifies that overflow is not clipped. It renders outside the element's box. This is a default value
hidden	It specifies that the overflow is clipped, and the rest of the content will be invisible.
scroll	It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
auto	It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
inherit	It inherits the property from its parent element.
initial	It is used to set the property to its initial value.

Example:

<!DOCTYPE html> 
<html> 

<head> 
    <style>
        div.scroll {
            background-color: #00ffff;
            width: 100px;
            height: 100px;
            overflow: scroll;
        }

        div.hidden {
            background-color: #00FF00;
            width: 100px;
            height: 170px;
            overflow: hidden;
        }
    </style> 
</head> 

<body> 
    <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
    </p> 
    <p>overflow:scroll</p> 
    <div class="scroll">You can use the overflow property when you want to have better control of the layout. 
        The default value is visible.</div> 
    <p>overflow:hidden</p> 
    <div class="hidden">You can use the overflow property when you want to have better control of the layout.  
        The default value is visible.</div> 
</body> 

</html>

Output:

CSS Overflow Property

Property	Description
overflow	This defines what happens if content overflows an element's box
overflow-wrap	This defines whether or not the browser can break lines with long words, if they overflow its container
overflow-x	This defines what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	This defines what to do with the top/bottom edges of the content if it overflows the element's content area