Home >>CSS Tutorial >CSS Overflow

CSS Overflow

CSS Overflow

The CSS Overflow property defines how to handle the content when it overflows or to add scrollbars when the content is not fit in the specified area. By using the overflow property you can control the overflow content via CSS.

CSS Overflow property values

Value Description
Scroll It defines to see the overflow content using a scroll scrollbar property.
Auto It specifies that if overflow is clipped, only when necessary it adds scrollbars.
Inherit From its parent element it inherits the property.
Visible This is a default value. The content is renders outside the element box and it specifies that overflow is not clipped.
hidden When overflows happens rest of the content will be invisible and it specifies that overflow is clipped.

Overflow visible

The content is renders outside the element box and it specifies that overflow is not clipped.

Let's take an Example of overflow visible:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.scroll {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: scroll;  
}  
  </style>  
</head>  
<body>   
<p>overflow:scroll</p>  
<div class="scroll">to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, </div>  
</body>  
</html>  
Output:

overflow:scroll

to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar, to see the hidden content add scrollbar,

Overflow :hidden

When overflows happens rest of the content will be invisible and it specifies that overflow is clipped.

Let's take an Example of overflow hidden:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.hidden {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: hidden;  
}  
  </style>  
</head>  
<body>   
<p>overflow: hidden</p>  
<div class="hidden"> the content is hidden, the content is hidden the,  content is hidden ,  content is hidden  ,  content is hidden  ,  content is hidden </div>  
</body>  
</html>  
Output:

overflow: hidden

the content is hidden, the content is hidden the, content is hidden , content is hidden , content is hidden , content is hidden

Overflow :Auto

It specifies that if overflow is clipped, only when necessary it adds scrollbars.

Let's take an Example of overflow auto:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.auto {  
    background-color: #e3f8ff;  
    width: 130px;  
    height: 100px;  
    overflow: auto;  
}  
  </style>  
</head>  
<body>   
<p>overflow:auto</p>  
<div class="auto">to see the hidden content add auto property, to see the hidden content add auto property,  to see the hidden content add auto property,  to see the hidden content add auto property,  to see the hidden content add auto property </div>  
</body>  
</html>  
Output:

overflow:auto

to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property, to see the hidden content add auto property