Advertisement

Advertisement


CSS Overflow

The CSS overflow property is used when the content of the container is larger than the space available in it. This property specifies how to handle the content when it overflows.

CSS Overflow Properties

Value Description
visible It specifies that overflow will be visible outside the element's box.
hidden It specifies that the overflow will not be visible.
scroll It adds a scroll bar to the container.
auto It specifies that a scroll bar is needed to see the rest of the content if overflow is detected.
inherit It inherits the property from its parent element.
initial It sets the property to its initial value.
Note : The overflow property only works for block elements with a specified height.

Visible

It specifies that overflow will be visible outside the element's box. It is the default value. By default, the overflow is visible, so it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies that what happens if content overflows an element's box.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Visible </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 75px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Visible
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Hidden

It specifies that the overflow is not visible, it gets hidden. With this, the overflow is clipped, and the rest of the content is hidden:


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Hidden </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Hidden
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Scroll

It sets a scroll bar inside the box. The scroll bar will always be visible even when there is no overflow.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Scroll </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Scroll
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.