Tailwind CSS
/Intermediate
Overflow
Definition
Utilities for controlling how an element handles content that is too large to fit inside its designated height or width.
Explain Like I'm New
If you put 100 lines of text into a tiny box, what happens? - `overflow-visible`: The text spills out of the box. - `overflow-hidden`: The text gets chopped off and disappears. - `overflow-scroll`: The box gets a scrollbar so you can scroll through the text.
Real World Example
Applying `overflow-hidden` to a card component so that the large image inside it gets its corners nicely rounded to match the card's border radius.
Common Use Cases
- •Scrollable sidebars
- •Clipping images
- •Hiding scrollbars
Interactive Example
Interview Questions
basic
- Which Tailwind class adds a scrollbar ONLY if the content is actually overflowing?
intermediate
- How do you apply overflow scrolling strictly to the Y-axis (vertical)?