CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto0%

CSS Positioning: Static, Relative, and Absolute Explained

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

Have you ever tried stuffing 10 thick textbooks into a tiny school bag? 🎒

When your books don't fit, they spill out of the bag opening!

In web design, a similar situation happens all the time:

A user posts a very long comment inside a fixed 200px card.
A wide data table or code snippet is loaded on a 375px mobile screen.
A large high-resolution photo is placed inside a small thumbnail container.

When an element's content exceeds its allocated width or height, that extra content is called overflow.

The CSS overflow property tells the browser exactly what to do with that spill: let it bleed, chop it off, or provide clean scrollbars!

In this lesson, you will master:

1
The 4 values of overflow (visible, hidden, scroll, auto)
2
Directional control with overflow-x and overflow-y
3
Rounded card image zoom effects using overflow: hidden
4
Building custom scrollable chat and notification panels

The School Tiffin Box Analogy 🍱

Imagine your School Lunch Tiffin Box:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE 4 BEHAVIORS OF CSS OVERFLOW                        |
+-------------------------------------------------------------------------+
| 1. overflow: visible (DEFAULT - THE MESSY DESK SPILL)                   |
|    You pack too much rice into your tiffin. The lid is open, and rice   |
|    spills all over your math notebook! It covers everything nearby.     |
|                                                                         |
| 2. overflow: hidden (THE GUILLOTINE CUTOFF)                             |
|    You slam the sharp steel tiffin lid shut. Whatever rice overflowed   |
|    is sliced off and thrown away. Clean borders, but content is lost!   |
|                                                                         |
| 3. overflow: scroll (THE PERMANENT ELEVATOR TRACKS)                     |
|    Your tiffin has permanent mechanical escalator tracks attached on    |
|    both sides, even when you only packed a single biscuit!              |
|                                                                         |
| 4. overflow: auto (THE SMART EXPANDING ELEVATOR)                        |
|    The escalator tracks appear ONLY if the tiffin is truly overflowing. |
|    If the food fits, it looks like a clean, regular box!                |
+-------------------------------------------------------------------------+

The 4 Core Overflow Values

Let's explore each value with code examples:

1. `overflow: visible` (Default)

By default, web browsers do not clip content. If text or images exceed the container's explicit dimensions, they simply spill outside the boundary box and overlap neighboring elements!

spill-box {
width: 250px;
height: 100px;
background-color: #fef08a;
overflow: visible; /* Default browser behavior */
6}

Visual Architecture Blueprint

+-----------------------+
| This is a fixed box.  |
| The text is too long  |
+-----------------------+
| and bleeds right into |  <-- Text ugly spill outside box!
| the footer below!     |
+-----------------------+

2. `overflow: hidden` (The Clean Chopper)

Any content extending beyond the container's border is immediately clipped and hidden from sight. No scrollbars are rendered.

clipped-box {
width: 250px;
height: 100px;
background-color: #fee2e2;
overflow: hidden; /* Slices off excess text */
6}

Pro Tip

[!TIP] Modern Use Case: Rounded Image Zoom Cards: When creating hover effects where an image zooms in (transform: scale(1.1)), setting overflow: hidden on the parent card prevents the enlarged image corners from poking outside the card's border-radius!

3. `overflow: scroll` (The Constant Scrollbar)

Forces the browser to display both horizontal (X) and vertical (Y) scrollbars, regardless of whether the content actually overflows!

fixed-scroll-box {
width: 300px;
height: 150px;
overflow: scroll; /* Scrollbars appear all the time */
5}

⚠️ Downside: On desktop browsers, this often displays disabled gray "ghost" scrollbars even when there are only two words of text, which looks clumsy.

4. `overflow: auto` (The Developer's Favorite ⭐)

This is the smartest and most widely used overflow value in professional web design:

If the content fits inside the box, no scrollbar appears.
If the content exceeds the box, a smooth scrollbar automatically appears!

chat-window {
width: 350px;
height: 250px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
overflow: auto; /* Intelligent dynamic scrollbar */
7}

Independent Axes: `overflow-x` vs `overflow-y`

Often, you want scrolling in only one direction:

overflow-x: Controls horizontal left-to-right overflow.
overflow-y: Controls vertical top-to-bottom overflow.

1/* Scrollable Chat Window: Vertical scroll only */
2.chat-messages {
3  height: 350px;
4  overflow-y: auto;   /* Scroll up and down */
5  overflow-x: hidden; /* Never scroll left or right */
6}
7 
8/* Code Snippet Box: Horizontal scroll only */
9pre.code-block {
10  overflow-x: auto;   /* Wide code lines scroll sideways */
11  overflow-y: hidden; /* No vertical scroll */
12}

Summary Comparison Table 📊

Value	When Content Fits	When Content Spills	Best Use Case
`visible`	Looks normal	Bleeds outside container	Rarely intended for fixed boxes
`hidden`	Looks normal	Chops off excess content	Rounded cards, thumbnail masks
`scroll`	Shows scrollbars anyway	Shows scrollbars	Legacy retro interfaces
`auto`	Clean (no scrollbar)	Shows scrollbar smoothly	Chat apps, code blocks, tables

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Using `overflow: auto` without setting a `height` or `max-height`	A block element expands infinitely downwards by default, so it never detects an overflow!	Always give the container a fixed `height` or `max-height`.
Putting `overflow: hidden` on a dropdown navigation bar	Dropdown submenus hanging below the navbar are ruthlessly clipped and vanish!	Avoid clipping containers that house floating tooltips or dropdowns.
Using `overflow: scroll` instead of `overflow: auto`	Produces unnecessary inactive gray scrollbars on desktop operating systems.	Use `overflow: auto;` for clean, on-demand scrollbars.
Forgetting `overflow-x: auto` on wide mobile tables	Tables spill across the viewport edge, creating an ugly horizontal page wobble.	Wrap wide tables in an `overflow-x: auto` container.

Summary Cheat Sheet 📌

Overflow occurs when an element's inner content is larger than its specified dimensions.
overflow: visible (default) lets excess content spill and overlap adjacent elements.
overflow: hidden clips any overflowing content neatly without scrollbars.
overflow: auto is the gold standard: displays scrollbars only when content truly exceeds available space.
overflow-x & overflow-y provide independent horizontal and vertical scroll control.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS overflow value automatically displays a scrollbar ONLY when content exceeds the container's boundaries?

Question 2

What happens if you apply overflow: auto to a container <div> that has NO height or max-height specified?

Question 3

Why do UI designers set overflow: hidden; on a card that has border-radius: 12px; and an inner image that zooms on hover?

Question 4

What is the key drawback of using overflow: scroll; instead of overflow: auto; on desktop browsers?

Question 5

If a developer wants vertical scrolling for long chat messages but wants to prohibit horizontal scrolling entirely, which properties should they write?

Practice Challenge (Try It Yourself)

1
Create a file named school-notice-board-overflow.html.
2
Build an attractive School Notice Board with a scrollable announcements panel (overflow-y: auto) and an image card with zoom clipping (overflow: hidden):

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Notice Board Overflow Lab</title>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .panel {
       background-color: white;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.06);
       margin-bottom: 24px;
     }
22 
     h3 {
       margin-top: 0;
       color: #0f172a;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 8px;
     }
29 
     /* Scrollable Notices Box */
     .notice-scroll-box {
       height: 200px;      /* Constrained height */
       overflow-y: auto;   /* Dynamic vertical scrollbar */
       padding-right: 12px;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       padding: 12px;
     }
39 
     .notice-item {
       padding: 10px;
       border-bottom: 1px solid #f1f5f9;
       font-size: 14px;
       color: #334155;
     }
46 
     .notice-item:last-child {
       border-bottom: none;
     }
50 
     .notice-date {
       font-weight: bold;
       color: #2563eb;
       display: block;
       font-size: 12px;
       margin-bottom: 4px;
     }
58 
     /* Zoom Card with overflow: hidden */
     .banner-card {
       width: 100%;
       height: 160px;
       border-radius: 12px;
       overflow: hidden; /* Clips the zoomed inner banner */
       position: relative;
       background: linear-gradient(135deg, #1e3a8a, #3b82f6);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 20px;
       font-weight: bold;
       cursor: pointer;
     }
75 
     .banner-content {
       transition: transform 0.3s ease;
     }
79 
     .banner-card:hover .banner-content {
       transform: scale(1.15); /* Zooms without bleeding out! */
     }
   </style>
 </head>
 <body>
   <div class="panel">
     <h3>School Daily Notices (Scrollable)</h3>
     <div class="notice-scroll-box">
       <div class="notice-item">
         <span class="notice-date">10 OCT 2026</span>
         Annual Sports Day trials for 100m sprint begin tomorrow at 7:00 AM on the main sports ground.
       </div>
       <div class="notice-item">
         <span class="notice-date">09 OCT 2026</span>
         CBSE practical project submission deadline for Class 10 Chemistry has been extended to Friday.
       </div>
       <div class="notice-item">
         <span class="notice-date">08 OCT 2026</span>
         Parent-Teacher Meeting (PTM) will be held this Saturday between 8:30 AM and 12:30 PM.
       </div>
       <div class="notice-item">
         <span class="notice-date">07 OCT 2026</span>
         Inter-school coding olympiad registrations are now open in the computer lab.
       </div>
       <div class="notice-item">
         <span class="notice-date">06 OCT 2026</span>
         School library will remain closed for inventory audit on Thursday.
       </div>
     </div>
   </div>
111 
   <div class="panel">
     <h3>Zoom Card (Clips with overflow: hidden)</h3>
     <div class="banner-card">
       <div class="banner-content">🎓 Annual Day 2026 Celebration</div>
     </div>
     <p style="font-size: 13px; color: #64748b; margin-top: 8px;">
       Hover over the blue banner above to see how <code>overflow: hidden;</code> prevents the enlarged text from spilling outside the rounded edges!
     </p>
   </div>
 </body>
 </html>

1
Open this file in your browser to test scrolling through the notices and hovering over the zoom banner! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with CSS Positioning: Static, Relative, and Absolute Explained (Introduction to Positioning).

👉 Continue to Next Lesson: CSS Positioning: Static, Relative, and Absolute Explained →

Next Lesson

CSS Positioning: Static, Relative, and Absolute Explained

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Display: none vs Visibility: hidden: Hiding Elements in CSS	CSS Positioning: Static, Relative, and Absolute Explained

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

CSS Positioning: Static, Relative, and Absolute Explained

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

Have you ever tried stuffing 10 thick textbooks into a tiny school bag? 🎒

When your books don't fit, they spill out of the bag opening!

In web design, a similar situation happens all the time:

A user posts a very long comment inside a fixed 200px card.
A wide data table or code snippet is loaded on a 375px mobile screen.
A large high-resolution photo is placed inside a small thumbnail container.

When an element's content exceeds its allocated width or height, that extra content is called overflow.

The CSS overflow property tells the browser exactly what to do with that spill: let it bleed, chop it off, or provide clean scrollbars!

In this lesson, you will master:

1
The 4 values of overflow (visible, hidden, scroll, auto)
2
Directional control with overflow-x and overflow-y
3
Rounded card image zoom effects using overflow: hidden
4
Building custom scrollable chat and notification panels

The School Tiffin Box Analogy 🍱

Imagine your School Lunch Tiffin Box:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE 4 BEHAVIORS OF CSS OVERFLOW                        |
+-------------------------------------------------------------------------+
| 1. overflow: visible (DEFAULT - THE MESSY DESK SPILL)                   |
|    You pack too much rice into your tiffin. The lid is open, and rice   |
|    spills all over your math notebook! It covers everything nearby.     |
|                                                                         |
| 2. overflow: hidden (THE GUILLOTINE CUTOFF)                             |
|    You slam the sharp steel tiffin lid shut. Whatever rice overflowed   |
|    is sliced off and thrown away. Clean borders, but content is lost!   |
|                                                                         |
| 3. overflow: scroll (THE PERMANENT ELEVATOR TRACKS)                     |
|    Your tiffin has permanent mechanical escalator tracks attached on    |
|    both sides, even when you only packed a single biscuit!              |
|                                                                         |
| 4. overflow: auto (THE SMART EXPANDING ELEVATOR)                        |
|    The escalator tracks appear ONLY if the tiffin is truly overflowing. |
|    If the food fits, it looks like a clean, regular box!                |
+-------------------------------------------------------------------------+

The 4 Core Overflow Values

Let's explore each value with code examples:

1. `overflow: visible` (Default)

By default, web browsers do not clip content. If text or images exceed the container's explicit dimensions, they simply spill outside the boundary box and overlap neighboring elements!

spill-box {
width: 250px;
height: 100px;
background-color: #fef08a;
overflow: visible; /* Default browser behavior */
6}

Visual Architecture Blueprint

+-----------------------+
| This is a fixed box.  |
| The text is too long  |
+-----------------------+
| and bleeds right into |  <-- Text ugly spill outside box!
| the footer below!     |
+-----------------------+

2. `overflow: hidden` (The Clean Chopper)

Any content extending beyond the container's border is immediately clipped and hidden from sight. No scrollbars are rendered.

clipped-box {
width: 250px;
height: 100px;
background-color: #fee2e2;
overflow: hidden; /* Slices off excess text */
6}

Pro Tip

3. `overflow: scroll` (The Constant Scrollbar)

Forces the browser to display both horizontal (X) and vertical (Y) scrollbars, regardless of whether the content actually overflows!

fixed-scroll-box {
width: 300px;
height: 150px;
overflow: scroll; /* Scrollbars appear all the time */
5}

⚠️ Downside: On desktop browsers, this often displays disabled gray "ghost" scrollbars even when there are only two words of text, which looks clumsy.

4. `overflow: auto` (The Developer's Favorite ⭐)

This is the smartest and most widely used overflow value in professional web design:

If the content fits inside the box, no scrollbar appears.
If the content exceeds the box, a smooth scrollbar automatically appears!

chat-window {
width: 350px;
height: 250px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
overflow: auto; /* Intelligent dynamic scrollbar */
7}

Independent Axes: `overflow-x` vs `overflow-y`

Often, you want scrolling in only one direction:

overflow-x: Controls horizontal left-to-right overflow.
overflow-y: Controls vertical top-to-bottom overflow.

1/* Scrollable Chat Window: Vertical scroll only */
2.chat-messages {
3  height: 350px;
4  overflow-y: auto;   /* Scroll up and down */
5  overflow-x: hidden; /* Never scroll left or right */
6}
7 
8/* Code Snippet Box: Horizontal scroll only */
9pre.code-block {
10  overflow-x: auto;   /* Wide code lines scroll sideways */
11  overflow-y: hidden; /* No vertical scroll */
12}

Summary Comparison Table 📊

Value	When Content Fits	When Content Spills	Best Use Case
`visible`	Looks normal	Bleeds outside container	Rarely intended for fixed boxes
`hidden`	Looks normal	Chops off excess content	Rounded cards, thumbnail masks
`scroll`	Shows scrollbars anyway	Shows scrollbars	Legacy retro interfaces
`auto`	Clean (no scrollbar)	Shows scrollbar smoothly	Chat apps, code blocks, tables

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Using `overflow: auto` without setting a `height` or `max-height`	A block element expands infinitely downwards by default, so it never detects an overflow!	Always give the container a fixed `height` or `max-height`.
Putting `overflow: hidden` on a dropdown navigation bar	Dropdown submenus hanging below the navbar are ruthlessly clipped and vanish!	Avoid clipping containers that house floating tooltips or dropdowns.
Using `overflow: scroll` instead of `overflow: auto`	Produces unnecessary inactive gray scrollbars on desktop operating systems.	Use `overflow: auto;` for clean, on-demand scrollbars.
Forgetting `overflow-x: auto` on wide mobile tables	Tables spill across the viewport edge, creating an ugly horizontal page wobble.	Wrap wide tables in an `overflow-x: auto` container.

Summary Cheat Sheet 📌

Overflow occurs when an element's inner content is larger than its specified dimensions.
overflow: visible (default) lets excess content spill and overlap adjacent elements.
overflow: hidden clips any overflowing content neatly without scrollbars.
overflow: auto is the gold standard: displays scrollbars only when content truly exceeds available space.
overflow-x & overflow-y provide independent horizontal and vertical scroll control.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS overflow value automatically displays a scrollbar ONLY when content exceeds the container's boundaries?

Question 2

What happens if you apply overflow: auto to a container <div> that has NO height or max-height specified?

Question 3

Why do UI designers set overflow: hidden; on a card that has border-radius: 12px; and an inner image that zooms on hover?

Question 4

What is the key drawback of using overflow: scroll; instead of overflow: auto; on desktop browsers?

Question 5

If a developer wants vertical scrolling for long chat messages but wants to prohibit horizontal scrolling entirely, which properties should they write?

Practice Challenge (Try It Yourself)

1
Create a file named school-notice-board-overflow.html.
2
Build an attractive School Notice Board with a scrollable announcements panel (overflow-y: auto) and an image card with zoom clipping (overflow: hidden):

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>School Notice Board Overflow Lab</title>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
       max-width: 650px;
       margin: 0 auto;
     }
14 
     .panel {
       background-color: white;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.06);
       margin-bottom: 24px;
     }
22 
     h3 {
       margin-top: 0;
       color: #0f172a;
       border-bottom: 2px solid #e2e8f0;
       padding-bottom: 8px;
     }
29 
     /* Scrollable Notices Box */
     .notice-scroll-box {
       height: 200px;      /* Constrained height */
       overflow-y: auto;   /* Dynamic vertical scrollbar */
       padding-right: 12px;
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       padding: 12px;
     }
39 
     .notice-item {
       padding: 10px;
       border-bottom: 1px solid #f1f5f9;
       font-size: 14px;
       color: #334155;
     }
46 
     .notice-item:last-child {
       border-bottom: none;
     }
50 
     .notice-date {
       font-weight: bold;
       color: #2563eb;
       display: block;
       font-size: 12px;
       margin-bottom: 4px;
     }
58 
     /* Zoom Card with overflow: hidden */
     .banner-card {
       width: 100%;
       height: 160px;
       border-radius: 12px;
       overflow: hidden; /* Clips the zoomed inner banner */
       position: relative;
       background: linear-gradient(135deg, #1e3a8a, #3b82f6);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 20px;
       font-weight: bold;
       cursor: pointer;
     }
75 
     .banner-content {
       transition: transform 0.3s ease;
     }
79 
     .banner-card:hover .banner-content {
       transform: scale(1.15); /* Zooms without bleeding out! */
     }
   </style>
 </head>
 <body>
   <div class="panel">
     <h3>School Daily Notices (Scrollable)</h3>
     <div class="notice-scroll-box">
       <div class="notice-item">
         <span class="notice-date">10 OCT 2026</span>
         Annual Sports Day trials for 100m sprint begin tomorrow at 7:00 AM on the main sports ground.
       </div>
       <div class="notice-item">
         <span class="notice-date">09 OCT 2026</span>
         CBSE practical project submission deadline for Class 10 Chemistry has been extended to Friday.
       </div>
       <div class="notice-item">
         <span class="notice-date">08 OCT 2026</span>
         Parent-Teacher Meeting (PTM) will be held this Saturday between 8:30 AM and 12:30 PM.
       </div>
       <div class="notice-item">
         <span class="notice-date">07 OCT 2026</span>
         Inter-school coding olympiad registrations are now open in the computer lab.
       </div>
       <div class="notice-item">
         <span class="notice-date">06 OCT 2026</span>
         School library will remain closed for inventory audit on Thursday.
       </div>
     </div>
   </div>
111 
   <div class="panel">
     <h3>Zoom Card (Clips with overflow: hidden)</h3>
     <div class="banner-card">
       <div class="banner-content">🎓 Annual Day 2026 Celebration</div>
     </div>
     <p style="font-size: 13px; color: #64748b; margin-top: 8px;">
       Hover over the blue banner above to see how <code>overflow: hidden;</code> prevents the enlarged text from spilling outside the rounded edges!
     </p>
   </div>
 </body>
 </html>

1
Open this file in your browser to test scrolling through the notices and hovering over the zoom banner! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with CSS Positioning: Static, Relative, and Absolute Explained (Introduction to Positioning).

👉 Continue to Next Lesson: CSS Positioning: Static, Relative, and Absolute Explained →

Next Lesson

CSS Positioning: Static, Relative, and Absolute Explained

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Display: none vs Visibility: hidden: Hiding Elements in CSS	CSS Positioning: Static, Relative, and Absolute Explained

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

The School Tiffin Box Analogy 🍱

The 4 Core Overflow Values

1. overflow: visible (Default)

2. overflow: hidden (The Clean Chopper)

3. overflow: scroll (The Constant Scrollbar)

4. overflow: auto (The Developer's Favorite ⭐)

Independent Axes: overflow-x vs overflow-y

Summary Comparison Table 📊

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

CSS Positioning: Static, Relative, and Absolute Explained

Related Lessons

Practice Quiz

Loading Page Content...

CSS Overflow: Handling Content Spills with Visible, Hidden, Scroll, and Auto

The School Tiffin Box Analogy 🍱

The 4 Core Overflow Values

1. overflow: visible (Default)

2. overflow: hidden (The Clean Chopper)

3. overflow: scroll (The Constant Scrollbar)

4. overflow: auto (The Developer's Favorite ⭐)

Independent Axes: overflow-x vs overflow-y

Summary Comparison Table 📊

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

CSS Positioning: Static, Relative, and Absolute Explained

Related Lessons

Practice Quiz

1. `overflow: visible` (Default)

2. `overflow: hidden` (The Clean Chopper)

3. `overflow: scroll` (The Constant Scrollbar)

4. `overflow: auto` (The Developer's Favorite ⭐)

Independent Axes: `overflow-x` vs `overflow-y`

1. `overflow: visible` (Default)

2. `overflow: hidden` (The Clean Chopper)

3. `overflow: scroll` (The Constant Scrollbar)

4. `overflow: auto` (The Developer's Favorite ⭐)

Independent Axes: `overflow-x` vs `overflow-y`