Overflow in CSS

The overflow property in CSS controls how content is handled when it exceeds the dimensions of its container.

It can be used to manage what happens when an element's content is too large to fit inside its box.


Overflow Property Values

  1. visible: The content is not clipped and will overflow the container. This is the default value.
  2. hidden: The content is clipped, and no scrollbars are provided.
  3. scroll: The content is clipped, but scrollbars are always provided (even if the content fits within the container).
  4. auto: Scrollbars are added only if the content overflows the container.


overflow: visible

<div style="width: 200px; height: 100px; background-color: lightblue; overflow: visible;">
    This content is overflowing the box. The box has a fixed width and height, but the content is still visible outside the box.
This content is overflowing the box. The box has a fixed width and height, but the content is still visible outside the box.
</div>

The content overflows the box, extending beyond the container's boundaries without any clipping.


overflow: hidden

<div style="width: 200px; height: 100px; background-color: lightgreen; overflow: scroll;">
    This content is overflowing the box. The box has a fixed width and height, and scrollbars are added.
This content is overflowing the box. The box has a fixed width and height, and scrollbars are added.
</div>

 Scrollbars are provided, allowing you to scroll through the content that overflows the container.


overflow: auto

<div style="width: 200px; height: 100px; background-color: lightgoldenrodyellow; overflow: auto;">
    This content is overflowing the box. The box has a fixed width and height, and scrollbars are added only if needed.
This content is overflowing the box. The box has a fixed width and height, and scrollbars are added only if needed.
</div>

Scrollbars appear only if the content exceeds the dimensions of the container.


Practical Use:

The overflow property is commonly used in layouts where the content's size is dynamic and may exceed the boundaries of its container, such as in modals, text boxes, or containers with dynamic content.

Understanding how to use overflow helps in creating more flexible and user-friendly designs.