CSS `overflow`

The CSS overflow property controls what happens when an element's content is too large to fit inside its container. It determines whether the content should be hidden, clipped, or scrollable.

1️⃣ Types of `overflow` Values

Value	Description
`visible`	Default. Content overflows outside the element.
`hidden`	Cuts off overflowing content without scrollbars.
`scroll`	Always shows scrollbars, even if not needed.
`auto`	Shows scrollbars only when necessary.
`clip` (New)	Like `hidden`, but content cannot be accessed even via scrolling.

2️⃣ `overflow: visible;` (Default)

✔ Content overflows outside the container.
✔ No clipping or scrollbars.

.container {
  width: 200px;
  height: 100px;
  overflow: visible;
}

🔹 Use case: When you want content to expand without restrictions.

3️⃣ `overflow: hidden;` (Clipping Content)

✔ Hides any overflowing content without scrollbars.
✔ The content remains in the DOM but is not visible.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

🔹 Use case: Useful for cropping images, preventing layout breaks.

4️⃣ `overflow: scroll;` (Always Scrollbars)

✔ Forces both horizontal and vertical scrollbars, even if content fits.

.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

🔹 Use case: Ensures scrolling availability always, useful for fixed-size areas.

5️⃣ `overflow: auto;` (Scrollbars Only When Needed)

✔ Adds scrollbars only if the content overflows.

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
}

🔹 Use case: Best for dynamic content where scrolling is required only when necessary.

6️⃣ `overflow: clip;` (Strict Clipping - No Scrolling)

✔ Similar to hidden, but content can’t be accessed via scrolling.
✔ Works best when combined with overflow-x or overflow-y.

.container {
  width: 200px;
  height: 100px;
  overflow: clip;
}

🔹 Use case: Used in modern UI designs where strict content clipping is required.

7️⃣ Controlling Horizontal and Vertical Overflow

Use overflow-x (horizontal) and overflow-y (vertical) separately.

.container {
  width: 200px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
}

✔ This hides horizontal overflow while allowing vertical scrolling.

8️⃣ Summary Table

Property	Effect
`overflow: visible;`	Content spills outside the container.
`overflow: hidden;`	Content is cut off, no scrollbars.
`overflow: scroll;`	Always shows scrollbars.
`overflow: auto;`	Scrollbars appear only when needed.
`overflow: clip;`	Strict clipping, no scrollbars allowed.

9️⃣ Conclusion

The CSS overflow property helps manage overflowing content efficiently.

Use visible to let content overflow naturally.
Use hidden to clip content without scrollbars.
Use scroll to always show scrollbars.
Use auto for a flexible approach, showing scrollbars only when required.

CSS

CSS overflow

1️⃣ Types of overflow Values

2️⃣ overflow: visible; (Default)

3️⃣ overflow: hidden; (Clipping Content)

4️⃣ overflow: scroll; (Always Scrollbars)

5️⃣ overflow: auto; (Scrollbars Only When Needed)

6️⃣ overflow: clip; (Strict Clipping - No Scrolling)