Overflow:-

The CSS overflow property is a controls the what happens to content that is too big to fit into in area.

we are code family

The overflow property some values:-

visible - The overflow is not clipped. The content renders outside the element's box

hidden - The overflow is clipped, and the rest of the content will be invisible or not on html page.

scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content on html page

auto - Similar to scroll, but it adds scrollbars only when necessary and according ot html page

overflow: visible:-

By-default, the overflow is visible in html page, meaning that it is not clipped and it renders outside the html page

<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>


<h2>Code family</h2>
<p>Code family</p>

<div><li>we are code family</li>
<li>we are code family</li>
<li>we are code family</li>
<li>we are code family</li>
<li>we are code family</li>
</div>

overflow: hidden:-

the is hidden value and the overflow is clipped on the html, and the rest of the content is hidden on the html page:

<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>


<h2>Code family</h2>
<p>Code family</p>
<p>Code family</p>

<div><li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
</div>

overflow: scroll:-

Setting the value to scroll, the overflow is clipped and a scrollbar is add to scroll inside the HTML page.

<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>


<h2>Code family</h2>
<p>Code family</p>
<div><li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
</div>

overflow: auto:-

The auto value is similar to scroll, but it adds scrollbar only when necessary and according to html page.

<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: auto;
}
</style>


<h2>Code family</h2>
<p>Code family.</p>

<div><li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li></div>

overflow-x & overflow-y:-

overflow-x define what to do with the left/right edges of the content. overflow-y define what to do with the top/bottom edges of the content.

<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>


<h2>CSS Overflow Code family</h2>
<p>Code family</p>
<p>overflow-x:Code family<br>
overflow-y :Code family</p>

<div><li>Code fmaily</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
</div>

Overflow in css