The CSS overflow property specifies how browsers handle content that is too large to fit inside an element's declared height or width boundaries.
Overflow properties can be configured overall or along individual axes (overflow-x, overflow-y):
.box-visible { overflow: visible; } /* Default: Content overflows outside box */
.box-hidden { overflow: hidden; } /* Clips content, hides extra overflow */
.box-scroll { overflow: scroll; } /* Always displays scrollbars */
.box-auto { overflow: auto; } /* Adds scrollbars ONLY when content overflows */
Key overflow options:
visible (Default): Content is not clipped and renders outside the element box.hidden: Clips overflowing content cleanly at the border edge (no scrollbars).scroll: Forces vertical and horizontal scrollbars regardless of whether content overflows.auto: Displays scrollbars only when text or media actually overflows container limits.flowchart TD
A["overflow Options"] --> B["visible -> Content overflows boundary box"]
A --> C["hidden -> Clips overflow text/images cleanly"]
A --> D["auto -> Adds scrollbar only when content overflows"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Overflow Example</title>
<style>
.scroll-container {
width: 100%;
max-width: 400px;
height: 140px;
background-color: #1e293b;
border: 1px solid #334155;
padding: 1rem;
border-radius: 8px;
overflow-y: auto; /* Adds vertical scrollbar when needed */
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Scrollable Text Box</h2>
<div class="scroll-container">
<h3>Scrollable Terms & Conditions</h3>
<p>Line 1: Lorem ipsum dolor sit amet.</p>
<p>Line 2: Consectetur adipiscing elit.</p>
<p>Line 3: Sed do eiusmod tempor incididunt ut labore.</p>
<p>Line 4: Ut enim ad minim veniam.</p>
</div>
</body>
</html>
overflow: auto over overflow: scroll: auto adds scrollbars only when content exceeds container bounds, avoiding empty inactive scrollbar tracks.overflow-x: auto on responsive code blocks and wide tables: Prevents long code blocks or wide tables from breaking mobile screen layouts.overflow: hidden for rounded border card clipping: Clips child images cleanly to match parent container border-radius rounded corners.Create a CSS class .code-scroll that enables horizontal scrolling using overflow-x: auto;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.