CSS Overflow

Subject: css

CSS Overflow

The overflow property in CSS controls what happens when content is too large to fit inside an element's box. It's commonly used with fixed dimensions to determine whether excess content is clipped, scrollable, or visible outside the boundary.

Syntax

🚀 Try it in Compiler

Overflow Property Values

  • visible: Default. Content overflows outside the element.
  • hidden: Clips the content that overflows.
  • scroll: Always shows scrollbars, even if not needed.
  • auto: Adds scrollbars only if content overflows.

Example: CSS Overflow Behavior

🚀 Try it in Compiler

Horizontal and Vertical Overflow

You can control overflow individually:

🚀 Try it in Compiler

When to Use CSS Overflow

  • To handle long content in fixed-size containers
  • For scrollable components like modals, chat boxes, or cards
  • To prevent layout issues from overflowing text or images

Key Takeaways

  • Use overflow to manage content that exceeds an element's boundaries
  • hidden hides overflow, scroll always shows scrollbars, auto shows only when needed
  • visible shows content outside the box, which may cause layout issues
  • Combine overflow-x and overflow-y for precise control
Next: CSS Float