CSS overflow

The CSS overflow property specifies whether to clip content, render scrollbars, or overflow content when it exceeds the box's dimensions.

There are four possible values for the overflow property:

  1. visible: Default value. Content is not clipped and may be rendered outside the box.
  2. hidden: Content is clipped and no scrollbars are provided.
  3. scroll: Content is clipped and scrollbars are provided to scroll through the content.
  4. auto: Content is clipped and scrollbars are provided only when necessary.

Let's see some examples that demonstrate how the overflow property works:

Result:
This is an example of overflow: visible.
Result:
This is an example of overflow: hidden. Content that exceeds the box's dimensions will be hidden.
Result: 

      <div style="width: 200px; height: 100px; border: 1px solid #000; overflow: scroll;">
        This is an example of overflow: scroll. Scrollbars will be provided to scroll through the content.
      </div>
Result: 

      <div style="width: 200px; height: 100px; border: 1px solid #000; overflow: auto;">
        This is an example of overflow: auto. Scrollbars will be provided only when necessary.
      </div>