Loading

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:

ValueDescription                                                                                                                               
visibleIt specifies that overflow is not clipped. It renders outside the element's box. This is a default value
hiddenIt specifies that the overflow is clipped, and the rest of the content will be invisible.
scrollIt specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
autoIt specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
inheritIt inherits the property from its parent element.
initialIt 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

PropertyDescription
overflowThis defines what happens if content overflows an element's box
overflow-wrapThis defines whether or not the browser can break lines with long words, if they overflow its container
overflow-xThis defines what to do with the left/right edges of the content if it overflows the element's content area
overflow-yThis defines what to do with the top/bottom edges of the content if it overflows the element's content area