​The **CSS overflow property** specifies what should happen if the content inside a container cannot fit completely​ inside it. It can take four different values:

1. **Visible:** Displays the overflowing content without any modifications -- this is the default value of the overflow property.

2. **Hidden:** Hides the overflowing content.

3. **Scroll:** Adds vertical and horizontal scroll bars to see the overflowing (hidden) content. On some web browsers, a disabled scroll bar will be displayed if the content does not overflow.

4. **Auto:** Adds scroll bars, but only if the content overflows.

div{
    width: 203px;
    height: 100px;
    background-color: #FEC4B8;
    color: #45597E;
    white-space: nowrap;
    margin-top: 20px;
}

#box1{
    overflow: visible;
}
#box2{
    overflow: hidden;
}
#box3{
    overflow: scroll;
}
#box4{
    overflow: auto;
}

<html>
 <head>
 </head>
 <body>
   <div id="box1">Overflow set to visible. The overflowing content shows up.</div>
   <div id="box2">Overflow set to hidden. The overflowing content is clipped and cannot be seen.</div>
   <div id="box3">Overflow set to scroll/auto. Vertical and horizontal scroll bars are added for this div container.
       <br>
       <br>Extra lines are added to show vertical scroll bars:
       <br>.
       <br>..
       <br>...
       <br>....
       <br>overflowing content.
   </div>
   <div id="box4">Overflow set to auto. The overflowing content shows up.
       <br>
       <br>
       <br>Difference between 'auto'
       <br>and 'scroll' will not be visible
       <br>in some browsers.
   </div>
 </body>
</html>

What is the overflow property in CSS?