There are some contents that are too large to fit into an HTML element. The overflow property in CSS can be used to handle those contents.
Overflow as the name suggests is used to handle those contents that overflows because the contents are too large to fit in an HTML element.
In case of Overflow, the overflow element comes to rescue.
The overflow property can have four values :
Let us see them in detail.
This is the default value for overflow property in CSS. For the value visible the overflowed content flows out of the HTML element.
Let us see it with the below example.
<html>
<head>
<style>
div {
border: solid;
width: 300px;
height: 100px;
overflow: visible;
}
</style>
</head>
<body>
<div>
In a huge pond, <br>
there lived many fish. <br>
They were arrogant <br>
and never listened to anyone. <br>
In this pond, <br>
there also lived a kind-hearted crocodile. <br>
He advised the fish, <br>
not to be arrogant and overconfident. <br>
But the fish never listened to him. <br>
One afternoon, <br>
the crocodile was resting <br>
when two fishermen <br>
stopped there to drink water. <br>
</div>
</body>
</html>
So, in the above example, we have a <div> element with 100px height, 300px width and has a black border around it.
Now, if you look at the above output, the overflown content came out of the border.
That is because we have set the value of the overflow property to visible.
overflow: visible;
For the value hidden, the overflowed content is completely hidden.
Let us see it with the below example.
<html>
<head>
<style>
div {
border: solid;
width: 300px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
In a huge pond, <br>
there lived many fish. <br>
They were arrogant <br>
and never listened to anyone. <br>
In this pond, <br>
there also lived a kind-hearted crocodile. <br>
He advised the fish, <br>
not to be arrogant and overconfident. <br>
But the fish never listened to him. <br>
One afternoon, <br>
the crocodile was resting <br>
when two fishermen <br>
stopped there to drink water. <br>
</div>
</body>
</html>
So, if you look at the above output, the overflowed is totally hidden. And no scrollbar is added for the overflowed element.
That is because we have set the value of the overflow property to hidden.
overflow: hidden;
As the name suggests, a scrollbar is added for the scroll value. However, only in case of MacOS, the scrollbar is hidden. Only when you scroll, you can see the scrollbar in MacOS.
Let us see it with the below example.
<html>
<head>
<style>
div {
border: solid;
width: 300px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
In a huge pond, <br>
there lived many fish. <br>
They were arrogant <br>
and never listened to anyone. <br>
In this pond, <br>
there also lived a kind-hearted crocodile. <br>
He advised the fish, <br>
not to be arrogant and overconfident. <br>
But the fish never listened to him. <br>
One afternoon, <br>
the crocodile was resting <br>
when two fishermen <br>
stopped there to drink water. <br>
</div>
</body>
</html>
So, if you look at the above output, a scrollbar is added for the overflowed content.
That is because we have set the value of the overflow property to scroll.
overflow: scroll;
For the auto value, a scrollbar is added for the overflowed content.
The scrollbar remains is hidden. It only shows up when you scroll through the overflowed content.
Let us see it with the below example.
<html>
<head>
<style>
div {
border: solid;
width: 300px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div>
In a huge pond, <br>
there lived many fish. <br>
They were arrogant <br>
and never listened to anyone. <br>
In this pond, <br>
there also lived a kind-hearted crocodile. <br>
He advised the fish, <br>
not to be arrogant and overconfident. <br>
But the fish never listened to him. <br>
One afternoon, <br>
the crocodile was resting <br>
when two fishermen <br>
stopped there to drink water. <br>
</div>
</body>
</html>
So, if you look at the above output, a scrollbar is added for the overflowed content. Usually it is hidden and only shows up when you scroll through the content.
That is because we have set the value of the overflow property to auto.
overflow: auto;