While designing a webpage, it is possible that the content in one of the elements of your HTML will *overflow* and overtake the size of that particular element. In this scenario, we can carefully cater to the overflowed content using the `overflow` CSS property. Below are the different values you can assign to the `overflow` property.

# overflow: visible

This is the `overflow` property's default value -- it lets the content flow out of the box:

<!DOCTYPE html>
<html>

  <style>

    div {
      width: 200px;
      height: 100px;
      border: 3px solid red;
      overflow: visible;
    }
    
  </style>

<body>
  <h1> AWS certified database </h1>
  
  <br>

  <div>
    AWS allows you to earn an industry-recognized credential that 
    validates your expertise in the breadth of AWS database services.
    
    This degree helps build credibility and confidence by highlighting 
    your ability to design, recommend, and maintain the optimal AWS database.
  </div>

</body>
</html>


codemirror

# overflow: hidden

Assigning *hidden* to `overflow` essentially clips the content that flows outside the size of the box. The content can be scrolled programmatically (i.e., by setting the value of a property like, offsetLeft), so the element is still a scroll container:

<!DOCTYPE html>
<html>

  <style>
    
    div {
      width: 200px;
      height: 100px;
      border: 3px solid red;
      overflow: hidden;
    }

  </style>

<body>
  <h1> AWS certified database </h1>
  
  <br>

  <div>
    AWS allows you to earn an industry-recognized credential that 
    validates your expertise in the breadth of AWS database services.
    
    This degree helps build credibility and confidence by highlighting 
    your ability to design, recommend, and maintain the optimal AWS database.
  </div>

</body>
</html>


# overflow: scroll

When *scroll* is assigned to `overflow`, a scrollbar is permanently added next to the content. The scrollbar lets you toggle the hidden content:

<!DOCTYPE html>
<html>

  <style>

    div {
      width: 200px;
      height: 100px;
      border: 3px solid red;
      overflow: scroll;
    }

  </style>

<body>
  <h1> AWS certified database </h1>
  
  <br>

  <div>
    AWS allows you to earn an industry-recognized credential that 
    validates your expertise in the breadth of AWS database services.
    
    This degree helps build credibility and confidence by highlighting 
    your ability to design, recommend, and maintain the optimal AWS database.
  </div>

</body>
</html>


> Use the `overflow-y` and `overflow-x` properties instead of `overflow` to set a scrollbar for only the vertical or horizontal content. 

# overflow: auto

The *auto* value is similar to the *scroll* value, the only difference is that *auto* only adds a scrollbar when there is a need. If the content doesn't exceed the dimensions of the box, a scrollbar is not added:

<!DOCTYPE html>
<html>

  <style>
    
    div {
      width: 200px;
      height: 100px;
      border: 3px solid red;
      overflow: auto;
    }

    h3 {
      font-style: italic;
    }

  </style>

<body>
  <h1> AWS certified database </h1>
  
  <br>

  <h3> Scrollbar ignored </h3>

  <div>
    AWS allows you to earn an industry-recognized credential that 
    validates your expertise in the breadth of AWS database services.
  </div>

  <br>

  <h3> Scrollbar added </h3>

  <div>
    AWS allows you to earn an industry-recognized credential that 
    validates your expertise in the breadth of AWS database services.
    
    This degree helps build credibility and confidence by highlighting 
    your ability to design, recommend, and maintain the optimal AWS database.
  </div>

</body>
</html>


What is CSS Overflow?

overflow: visible

overflow: hidden

overflow: scroll

overflow: auto