CSS Overflow · Controlling What Happens When Content Is Too Big

Before diving into overflow, make sure you understand these building blocks. If anything below looks unfamiliar, read the short explanation before continuing.

What is a CSS Box?

Every HTML element on a webpage is treated as a rectangular box. That box has four layers:

+----------------------------------+
|           MARGIN                 |
|  +----------------------------+  |
|  |        BORDER              |  |
|  |  +----------------------+  |  |
|  |  |      PADDING         |  |  |
|  |  |  +----------------+  |  |  |
|  |  |  |   CONTENT      |  |  |  |
|  |  |  +----------------+  |  |  |
|  |  +----------------------+  |  |
|  +----------------------------+  |
+----------------------------------+

The content area is where your text, images, and child elements live. When you set width and height on an element, you are setting the size of that content area.

What is Width and Height?

div {
  width: 200px;   /* The box is 200 pixels wide */
  height: 100px;  /* The box is 100 pixels tall */
}

These two properties create a fixed-size box. The moment you make a box a fixed size, you create the possibility of overflow · because the content inside might be bigger than the box.

What Are Block Elements?

Block elements (like <div>, <p>, <section>) take up the full width of their parent and stack vertically. The overflow property only works on block elements that have a set height. Keep this rule in mind · it is very important.

What Is Overflow?

Think of a box as a glass of water. If you pour too much water in, it spills over the edges. In CSS, when content is too large to fit inside a box, it overflows · it spills outside the box's boundaries.

The problem overflow solves: Without any overflow rules, content just keeps spilling out, which can break your entire page layout. Overflow gives you control over what happens in that situation.

Real-world analogy: Imagine a receipt printer at a supermarket. The paper has a fixed width. If the product name is too long, should it spill off the edge of the paper? Should it be cut off? Should it wrap? The overflow property answers exactly that question for CSS boxes.

When Does Overflow Happen?

Overflow happens when:

1. You give an element a fixed height and the content inside is taller than that height.
2. You give an element a fixed width and the content inside is wider than that width.
3. A child element is absolutely positioned outside its parent.
4. You use white-space: nowrap and a long line of text cannot wrap.

Key Rule to remember: The overflow property only takes effect when the element has a set height. Without a height, block elements simply grow taller to fit their content, so overflow never occurs.

The overflow property is written like this:

selector {
  overflow: value;
}

There are five values you need to know:

Let's explore each one deeply.

Value 1 · overflow: visible (The Default)

What Is It?

visible is the default value of the overflow property. You never need to write it explicitly unless you are overriding a previous setting.

With overflow: visible, content that is too large to fit inside the box simply renders outside the box boundaries. It is not clipped, not hidden, and no scrollbar appears.

Why Does This Exist?

Beginners often wonder: "Why would I want content to spill outside its box?" The answer is that sometimes you do · for example, tooltips, dropdown menus, or decorative elements that extend beyond a container. Also, it is the safe default: your content is never accidentally hidden.

Important: Even though the content is visible outside the box, it does not affect the flow of the page. Other elements on the page do not move to make room for the overflowing content · they stay exactly where they are.

Simple Example

<!-- HTML -->
<div class="box">
  This is a very long paragraph of text that will not fit inside
  this small box. It will just spill outside the box boundaries
  and render over whatever is below it.
</div>
<p>This paragraph is right below the box.</p>

/* CSS */
.box {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible; /* This is the default — you don't need to write it */
}

Expected Output (visual description):

+-----------------------------+
|  This is a very long par... | ← coral box (65px tall)
+-----------------------------+
  ...agraph of text that will  ← content spills out below
  not fit inside this small    ← it overlaps the paragraph below
  box. It will just spill...
This paragraph is right below the box.  ← paragraph does NOT move

The overflowing text does not push the paragraph down · it overlaps it. This is the key behaviour of overflow: visible.

💭 Think about it: What would happen if you removed the height: 65px property? Try it! The box would simply grow taller to fit all the text, and there would be no overflow at all.

Value 2 · overflow: hidden

What Is It?

With overflow: hidden, any content that goes beyond the box boundaries is cut off and completely hidden. It is as if you took scissors to everything outside the box.

Why Use It?

• To prevent overflowing content from ruining your layout
• To create clean, cropped image effects
• To hide long text that users do not need to read (for example, a subtitle that is too long for a card component)
• As a technique for clearing floats (covered in a later lesson)

Simple Example

<!-- HTML -->
<div class="box">
  This is a very long paragraph of text that will not fit inside
  this small box. Watch what happens to the extra text.
</div>

/* CSS */
.box {
  width: 200px;
  height: 65px;
  background-color: lightblue;
  overflow: hidden;
}

Expected Output (visual description):

+-----------------------------+
|  This is a very long par... | ← only 65px of content is visible
+-----------------------------+
                               ← everything below is GONE (hidden)

The text is cleanly cut off at the box boundary. No scrollbar appears. The hidden text still exists in the HTML · it is just not rendered on screen.

Second Example · Cropping an Image

<!-- HTML -->
<div class="image-frame">
  <img src="large-photo.jpg" alt="Landscape" />
</div>

/* CSS */
.image-frame {
  width: 300px;
  height: 200px;
  overflow: hidden;  /* Crops the image to fit the frame exactly */
}

.image-frame img {
  width: 500px;  /* Image is wider than the frame */
}

Expected Output: The image displays inside the 300×200 frame, and the parts of the image that are wider than 300px are cleanly cropped off. This is exactly how profile picture circles and thumbnail images are made on real websites.

💭 Think about it: What if you need users to access the hidden content? overflow: hidden removes it from view permanently. That is when you need scroll or auto instead.

Value 3 · overflow: scroll

What Is It?

With overflow: scroll, the browser always adds scrollbars to the element · both a vertical scrollbar and a horizontal scrollbar · regardless of whether the content actually overflows. Users can scroll to see all the content.

Why Use It?

• For content boxes where users need to read everything (terms and conditions, long descriptions, chat windows, comment sections)
• When you want consistent scrollbar space so your layout does not shift when content changes

Simple Example

<!-- HTML -->
<div class="box">
  Chapter 1: The Beginning. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  Chapter 2: The Middle. Duis aute irure dolor in reprehenderit in
  voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Chapter 3: The End. Excepteur sint occaecat cupidatat non proident.
</div>

/* CSS */
.box {
  width: 300px;
  height: 100px;
  background-color: lightyellow;
  border: 1px solid #ccc;
  overflow: scroll;
}

Expected Output:

+-----------------------------------+  ↑
| Chapter 1: The Beginning. Lorem   |  |
| ipsum dolor sit amet, consectetur |  | 100px
| adipiscing elit. Sed do eiusmod   |  | visible
+-----------------------------------+ ↓|
[=======================]  ← horizontal scrollbar (always shown)
     ↕  ← vertical scrollbar (always shown)

Both scrollbars appear even if the content only overflows in one direction. This is a known drawback of scroll · the horizontal scrollbar may appear even when it is not needed.

💭 Think about it: What if the box has very little text and no overflow happens at all? The scrollbars still appear with overflow: scroll · they just cannot be scrolled. Is that good design? Usually not. That is why auto is often a better choice.

Value 4 · overflow: auto ⭐ (Recommended for Most Cases)

What Is It?

overflow: auto is the smart version of scroll. The browser checks whether the content actually overflows. If it does, a scrollbar is added only in the direction where overflow occurs. If it does not overflow, no scrollbar appears at all.

Why Use It?

• Cleaner design · no unnecessary scrollbars
• Flexible · works correctly whether content is short or long
• The most commonly used overflow value in professional web development

Simple Example

<!-- HTML: Example A — content overflows -->
<div class="box">
  This is a long text that exceeds the height of the box.
  More content here. Even more content here.
  And here is some additional text to make it even longer.
</div>

/* CSS */
.box {
  width: 300px;
  height: 80px;
  background-color: #f0f0f0;
  border: 1px solid #999;
  overflow: auto;
}

Expected Output (content overflows):

+-----------------------------------+ ↑
| This is a long text that exceeds  | |
| the height of the box. More con...|↕| ← vertical scrollbar appears
+-----------------------------------+ ↓

Only the vertical scrollbar appears because the overflow is only vertical. No horizontal scrollbar.

<!-- HTML: Example B — content does NOT overflow -->
<div class="box">Short text.</div>

Expected Output (no overflow):

+-----------------------------------+
| Short text.                       |
+-----------------------------------+

No scrollbars at all · the box looks completely clean. This is the difference between scroll and auto.

Comparison Table · scroll vs auto

⭐ Best practice: In most situations, prefer overflow: auto over overflow: scroll. It gives a cleaner appearance and only shows controls when they are actually needed.

Value 5 · overflow: clip (Advanced)

What Is It?

overflow: clip is the newest overflow value. It looks very similar to overflow: hidden · it cuts off content that overflows · but with one important technical difference: it does not create a scroll container.

What Is a Scroll Container?

When you use hidden, scroll, or auto, the browser creates what is called a scroll container · a scrollable region, even if no scrollbar is visible. This has a side effect: you cannot have one axis set to clip/hidden while the other axis is set to visible. The scroll container limitation prevents it.

clip removes this limitation. It is pure clipping without any scroll container.

Why Use clip?

• When you want to clip content in one direction while keeping it visible in another direction
• When you specifically do NOT want the element to be programmatically scrollable
• For certain advanced layout techniques

Simple Example

/* CSS */
.box {
  width: 300px;
  height: 100px;
  overflow-x: clip;   /* Clip horizontal overflow */
  overflow-y: visible; /* Allow vertical overflow to show */
}

With hidden instead of clip, the above combination would not work as expected. clip enables this kind of fine-grained directional control.

📝 Note for beginners: You will use clip rarely. For everyday work, hidden, auto, and scroll are the three values you will reach for most often. Learn clip when you encounter a specific layout problem that those three cannot solve.

So far you have used the shorthand overflow property, which applies the same rule to both horizontal (left/right) and vertical (up/down) overflow. But CSS also gives you two separate properties:

• overflow-x · controls what happens to content that overflows horizontally (left and right edges)
• overflow-y · controls what happens to content that overflows vertically (top and bottom edges)

Both properties accept the same values: visible, hidden, scroll, auto, and clip.

Why Would You Use These Separately?

Real-world scenario: You are building a data table that can have many columns. You want users to be able to scroll horizontally to see all columns, but you do not want a vertical scrollbar · the table should just show all rows. Solution: overflow-x: auto + overflow-y: visible.

Another scenario: A chat window where you always want vertical scrolling for messages, but never horizontal scrolling: overflow-x: hidden + overflow-y: auto.

overflow-x · Controlling Horizontal Overflow

overflow-x controls content that overflows on the left or right sides of the box.

Simple Example · Horizontal Scrollbar

<!-- HTML -->
<div class="wide-content">
  This sentence is extremely long and will not wrap because we 
  have turned off text wrapping using white-space: nowrap — which 
  forces all text onto one single line no matter how long it gets.
</div>

/* CSS */
.wide-content {
  width: 300px;
  height: 60px;
  border: 2px solid steelblue;
  white-space: nowrap;  /* Forces text onto one line — causes horizontal overflow */
  overflow-x: scroll;   /* Adds a horizontal scrollbar */
}

Expected Output:

+--------------------------------------------→ (scroll right)
| This sentence is extremely long and will no|  ← text cut at right edge
+--------------------------------------------+
[========================]  ← horizontal scrollbar

Users can scroll right to read the rest of the sentence.

overflow-x: hidden · Hiding Horizontal Overflow

/* CSS */
.cropped {
  width: 300px;
  overflow-x: hidden;  /* Hide anything that sticks out to the right */
}

This is commonly used to prevent a child element (like an animated element that slides in from the right) from causing a horizontal scrollbar on the entire page.

All overflow-x Values

.box { overflow-x: visible; } /* Default — horizontal overflow shows outside */
.box { overflow-x: hidden;  } /* Horizontal overflow is cut off and hidden */
.box { overflow-x: scroll;  } /* Horizontal scrollbar always shown */
.box { overflow-x: auto;    } /* Horizontal scrollbar only when needed */

overflow-y · Controlling Vertical Overflow

overflow-y controls content that overflows the top or bottom edges of the box.

Simple Example · Vertical Scrollbar

<!-- HTML -->
<div class="scrollable-text">
  <p>Paragraph 1: The quick brown fox jumps over the lazy dog.</p>
  <p>Paragraph 2: Pack my box with five dozen liquor jugs.</p>
  <p>Paragraph 3: How vexingly quick daft zebras jump!</p>
  <p>Paragraph 4: The five boxing wizards jump quickly.</p>
  <p>Paragraph 5: Sphinx of black quartz, judge my vow.</p>
</div>

/* CSS */
.scrollable-text {
  width: 300px;
  height: 80px;    /* Box is only 80px tall — content is taller */
  border: 2px solid tomato;
  overflow-y: scroll;  /* Always show vertical scrollbar */
}

Expected Output:

+-----------------------------------+ ↑
| Paragraph 1: The quick brown fox  | |
| jumps over the lazy dog.          |↕| ← vertical scrollbar
+-----------------------------------+ ↓

Users can scroll up and down to read all five paragraphs.

overflow-y: hidden · Cutting Off Vertical Content

/* CSS */
.preview-card {
  width: 250px;
  height: 100px;
  overflow-y: hidden;  /* Show only the top 100px of content */
  background: #fff;
  border: 1px solid #ddd;
}

This is a classic design pattern: show a preview of an article or blog post, cutting it off at a fixed height, then adding a "Read more" button below.

Combining overflow-x and overflow-y

The real power comes when you combine both properties. You can set completely different behaviour for each axis.

Example · Horizontal Scroll, Vertical Hidden

/* CSS */
.data-table-wrapper {
  width: 500px;
  height: auto;
  overflow-x: auto;    /* Scroll horizontally if table is wider than 500px */
  overflow-y: visible; /* Let height grow as needed — no vertical scroll */
}

Important rule: You cannot set one axis to visible while the other axis is set to hidden, scroll, or auto · unless you use clip for the visible direction. If you try this combination with hidden/scroll/auto, the browser automatically changes the visible axis to auto. This is a known CSS quirk.

Correct Cross-Axis Combination

/* This works correctly */
.element {
  overflow-x: auto;
  overflow-y: hidden;
}

/* This also works */
.element {
  overflow-x: scroll;
  overflow-y: auto;
}

/* This has a quirk — the 'visible' will be converted to 'auto' by the browser */
.element {
  overflow-x: hidden;
  overflow-y: visible;  /* Browser may change this to 'auto' */
}

/* Use 'clip' instead of 'hidden' to avoid the quirk */
.element {
  overflow-x: clip;     /* True clipping — no scroll container created */
  overflow-y: visible;  /* This now works as expected */
}

The Shorthand overflow with Two Values

You can also write overflow with two values in one line. The first value applies to overflow-x, the second to overflow-y:

/* Syntax: overflow: [x-value] [y-value]; */

.box { overflow: hidden scroll; }
/* Equivalent to: overflow-x: hidden; overflow-y: scroll; */

.box { overflow: auto hidden; }
/* Equivalent to: overflow-x: auto; overflow-y: hidden; */

.box { overflow: scroll auto; }
/* Equivalent to: overflow-x: scroll; overflow-y: auto; */

When you write only one value (like overflow: hidden), both axes are set to the same value.

Mistake 1 · Using overflow Without Setting a Height

/* WRONG — overflow has no effect without a height */
.box {
  width: 300px;
  /* No height set! */
  overflow: hidden;   /* This does nothing — content just makes the box taller */
}

/* CORRECT */
.box {
  width: 300px;
  height: 150px;      /* Height must be set for overflow to work */
  overflow: hidden;
}

Why this happens: Without a height, block elements simply grow to fit their content. There is no overflow to manage. The overflow property only activates when the content is larger than the fixed box.

Mistake 2 · Choosing scroll When auto Is Better

/* WRONG — scrollbars always appear even when not needed */
.notification-box {
  height: 200px;
  overflow: scroll;   /* Empty state will show scrollbars — ugly! */
}

/* CORRECT — scrollbars only appear when needed */
.notification-box {
  height: 200px;
  overflow: auto;     /* Clean when empty, scrollable when full */
}

Why this matters: scroll shows scrollbars permanently. When the box is empty or has little content, the scrollbars make the UI look cluttered and unprofessional.

Mistake 3 · Trying to Set One Axis to visible With the Other to hidden

/* PROBLEMATIC — browser will change overflow-y to 'auto' */
.box {
  overflow-x: hidden;
  overflow-y: visible;   /* Browser ignores this and makes it 'auto' */
}

/* CORRECT — use 'clip' to achieve true clipping without a scroll container */
.box {
  overflow-x: clip;
  overflow-y: visible;   /* Now this works as expected */
}

Why this happens: hidden, scroll, and auto all create a scroll container. A scroll container cannot have visible overflow on one axis while being limited on the other. The clip value does not create a scroll container, so the limitation does not apply.

Mistake 4 · Forgetting white-space: nowrap for Horizontal Overflow

/* WRONG — text will wrap instead of overflowing horizontally */
.wide-content {
  width: 300px;
  overflow-x: scroll;   /* Scrollbar appears but content still wraps — no horizontal overflow */
}

/* CORRECT — prevent wrapping so content actually overflows horizontally */
.wide-content {
  width: 300px;
  white-space: nowrap;  /* Forces content onto one line */
  overflow-x: scroll;   /* Now the horizontal scrollbar actually works */
}

Why this happens: Text naturally wraps when it hits the container edge. If it wraps, it overflows vertically (if at all), not horizontally. white-space: nowrap prevents wrapping so text can overflow horizontally.

Mistake 5 · Using overflow: hidden on the Wrong Element

/* WRONG — hiding overflow on body can prevent page scrolling */
body {
  overflow: hidden;   /* The entire page is now unscrollable! */
}

/* CORRECT — apply overflow to the specific element that needs it */
.modal-content {
  overflow: hidden;   /* Only this specific box clips its content */
}

Why this matters: Applying overflow: hidden to <html> or <body> removes the ability to scroll the entire page. This is sometimes done intentionally (to trap scroll inside a modal dialog) but is a very common accidental mistake.