visible
Default behavior. Content can paint outside the box.
Platform under construction
Overflow
Overflow decides what happens when content is larger than its box. It can reveal, scroll, hide or clip content.
.activity-log {
max-height: 18rem;
overflow: auto;
}
Box Model
Overflow is the browser telling you content no longer fits.
Content can outgrow its container because text is longer, images are wider, data tables are large or a fixed height is too small.
The overflow property lets you decide what happens next. Sometimes you need a scroll area. Sometimes you need to fix the layout instead.
The danger is using overflow: hidden to hide symptoms. If important content disappears, users lose information and controls.
hidden
Clips overflowing content. Useful for decoration, risky for real text.
auto
Adds scrollbars only when needed. Often best for panels and tables.
clip
Clips without creating a scroll container. Useful for controlled visual clipping.
Visual model
See the box before you change the CSS.
Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.
No special overflow behavior is needed.
The box must either grow, scroll or clip.
Do not hide important content by accident.
Examples
Professional spacing is deliberate, not decorative guesswork.
Controlled scroll area
.activity-log {
max-height: 18rem;
overflow: auto;
padding: 1rem;
}
Content disappears
.pricing-card {
height: 14rem;
overflow: hidden;
/* important details may be clipped */
}
Rules that matter
Make every spacing and sizing decision explainable.
Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.
Treat overflow as a signal
Overflow often means content and dimensions disagree.
Use auto for real content
If users may need the content, let them scroll.
Avoid clipping focus
Hidden overflow can cut off outlines and menus.
Give scroll areas room
Tiny scroll containers are painful to use.
Use max-height instead of height
Let content fit naturally until a limit is needed.
Test long strings
URLs, code and product names expose overflow bugs quickly.
Production thinking
The box model is where visual polish becomes maintainable CSS.
Why does this matter?
Overflow handling decides whether real content remains usable when the design meets messy data.
Accessibility
Clipped focus rings, hidden text and nested scroll traps can make a page difficult for keyboard and screen magnifier users.
Production note
Overflow rules need real QA with long content, zoom, mobile widths and keyboard navigation.
SEO note
Important content should not be visually hidden by accidental clipping.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change overflow to hidden and identify what users lose.
- Replace max-height with height and add longer text.
- Set overflow: visible and observe how content paints outside the box.
Practice assignment
Do this before moving to the next lesson.
- Create a panel with max-height and overflow: auto.
- Add enough content to force scrolling.
- Explain when clipping would be acceptable and when it would be harmful.
Try it yourself
Choose scroll instead of clipping content
Self-check
Before you continue, prove that you understand Overflow.
Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.
- Can you explain why overflow appears?
- Can you choose between hidden, auto and visible?
- Can you avoid clipping important content?
- Can you test overflow with long text and zoom?
- Can you notice when overflow is hiding a deeper sizing problem?
Senior audit upgrade
Overflow can hide real accessibility problems.
overflow: hidden can make a layout look fixed while hiding focusable content, long text or controls users still need.
hidden vs clip
clip clips without creating a scroll container; hidden clips and can still create overflow behavior.
Focusable content
Do not hide keyboard-focusable content outside a clipped area.
Scroll containers
If content must scroll, make that scroll area obvious and usable.