Hello Devs, 

In this tutorial, we will learn CSS overflow

CSS overflow property is used to manage the content that too big or not fit to specific area. CSS Overflow

It has following values; 

  • visible
  • hidden
  • scroll
  • auto
  • inherit
  • initial

Overflow visible

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow Visible</h2>


<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
</div>

</body>
</html>




Overflow Hidden

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow Hidden</h2>

<P>It specifies that the overflow is clipped, and rest of the content will be invisible.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>



Overflow Scroll

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: Scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow Scroll</h2>

<P>It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>



Overflow auto

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: auto;
}
</style>
</head>
<body>

<h2>CSS Overflow Auto</h2>

<P>It is similar to scroll but it added scroll when it needed.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>



May this example help you.