CSS overflow options

The CSS overflow property controls how content that exceeds the dimensions of an element’s box is handled. Here are the options available for the overflow property and their effects:

1. overflow: visible;

This is the default value. Content is not clipped and it renders outside the element’s box.

Use Case: When you want the content to be fully visible even if it overflows the container.

Example:

2. overflow: hidden;

Content that exceeds the dimensions of the element’s box is clipped and not visible.

Use Case: When you want to hide overflowing content, like in a fixed-size container.

Example:

3. overflow: scroll;

Always shows scrollbars, even if the content does not overflow. This ensures that the user can scroll the content within the box.

Use Case: When you want to provide a scrollable area regardless of whether the content overflows.

Example:

4. overflow: auto;

Automatically adds scrollbars only when the content overflows the element’s box.

Use Case: When you want to add scrollbars only when necessary, providing a cleaner UI.

Example:

5. overflow: clip;

Similar to hidden, but the content is clipped without adding scrollbars. It’s used for more precise clipping of overflow.

Use Case: When you want to clip the content tightly to the container without any scrollbars.

Example:

6. overflow-x and overflow-y

These properties control the horizontal (overflow-x) and vertical (overflow-y) overflow, respectively. They accept the same values as overflow.

Use Case: When you need to control the overflow behavior independently for the horizontal and vertical directions.

Example:

Examples and Demonstrations

Here are examples demonstrating different overflow values in action:

HTML:

In this example, each div with the class box demonstrates a different overflow value. You can see how the content behaves when it exceeds the dimensions of the box. This helps in understanding how to use the overflow property effectively in various scenarios.