Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Overflow
When content is bigger than its container, the overflow property controls what happens - show it, hide it, or add scroll bars. Overflow is crucial for creating scrollable areas, preventing layout breaks, and clipping content within rounded corners.
Overflow Values
- overflow: visible (default) - Content overflows the container and is visible. Can cause layout issues
- overflow: hidden - Clips content that overflows. Used to contain floats and clip to border-radius
- overflow: scroll - Always shows scrollbars, even if content fits. Rarely used directly
- overflow: auto - Shows scrollbar ONLY when content overflows. The most practical choice
- overflow-x / overflow-y - Control horizontal and vertical overflow independently
- text-overflow: ellipsis - Truncates overflowing text with '...' (needs overflow: hidden and white-space: nowrap)
- overflow: hidden on rounded cards - Ensures images respect border-radius corners
Overflow Code
/* Scrollable container */
.scroll-container {
max-height: 300px;
overflow-y: auto; /* Vertical scrollbar when needed */
}
/* Text truncation with ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* Card with clipped image corners */
.card {
border-radius: 16px;
overflow: hidden; /* Image respects rounded corners */
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
/* Horizontal scroll for tags */
.tag-list {
display: flex;
gap: 8px;
overflow-x: auto; /* Scroll horizontally */
overflow-y: hidden;
padding-bottom: 4px; /* Space for scrollbar */
}Tip
Use overflow: hidden on card containers with border-radius to ensure images and child elements respect the rounded corners. Without it, images will have sharp corners even if the parent card is rounded.
Every element follows the box model - content + padding + border + margin
Common Mistake
Using text-overflow: ellipsis without the other two required properties. All three are needed together: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - plus a max-width on the element. Missing any one of them means no ellipsis.
Quick Quiz
Key Takeaways
- When content is bigger than its container, the overflow property controls what happens - show it, hide it, or add scroll bars.
- overflow: visible (default) - Content overflows the container and is visible. Can cause layout issues
- overflow: hidden - Clips content that overflows. Used to contain floats and clip to border-radius
- overflow: scroll - Always shows scrollbars, even if content fits. Rarely used directly