Beginner LevelCSS & Modern Layouts
What does the CSS overflow property control?
❓ Interview Prompt: Explain overflow: visible, hidden, scroll, auto, and clip.
The overflow property controls how content behaves when it exceeds the element's dimensions:
•
`visible` (default): Overflowing content renders outside the box.
•
`hidden`: Clips content at the element boundary. Creates a Block Formatting Context (BFC).
•
`scroll`: Always shows scrollbars regardless of whether content overflows.
•
`auto`: Shows scrollbars only when content actually overflows.
•
`clip`: Like hidden but prevents programmatic scrolling via JavaScript.
Axis-specific:
overflow-x and overflow-y control horizontal and vertical overflow independently.
Code Implementation Example
css
/* Scrollable card body with fixed height */
.card-body {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Text truncation with ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}💡Scrollable container and single-line text truncation with ellipsis.
🎯 Interview Key Takeaway
Use overflow: auto for scrollable containers and the truncate pattern (nowrap + hidden + ellipsis) for text cutoff.
#Overflow#Scroll#Clipping#Beginner
Back to all CSS & Modern Layouts Questions→