HTML & CSS
/Beginner
Overflow
Definition
The `overflow` property specifies whether to clip the content, add a scrollbar, or display overflow content when it is too large to fit in its block-level container.
Explain Like I'm New
If you have a tiny cardboard box, and you try to shove a massive book into it, what happens? By default in CSS, the book just sticks out the side of the box (it overflows). The `overflow` property lets you tell the browser to either cut off the part sticking out, or create a scrollbar inside the box.
Real World Example
A Terms and Conditions box. You have 50 paragraphs of legal text, but you only want it to take up 300px of screen height. You use `overflow-y: scroll` to put a scrollbar inside the box.
Common Use Cases
- •Scrollable sidebars
- •Hiding elements that animate off-screen
- •Terms of service text boxes
Interactive Example
Interview Questions
basic
- What is the default value of the `overflow` property?
intermediate
- What is the difference between `overflow: hidden` and `overflow: auto`?