CSS Overflow

Learn how CSS overflow controls content that exceeds element boundaries using visible, hidden, scroll, auto, overflow-x, overflow-y, and modern clipping techniques.

Introduction

In the previous lesson, you learned CSS Float and how elements can move to the left or right while surrounding content wraps around them.

Now you will learn CSS Overflow, which controls what happens when content becomes larger than the available space inside an element.

Overflow appears frequently in real applications. Long text, large images, wide tables, code blocks, chat messages, notifications, sidebars, and fixed-height panels can all exceed their containers.

Create Container

↓

Calculate Available Space

↓

Measure Content Size

↓

Detect Overflow

↓

Read overflow Property

↓

Show, Hide, Clip, or Scroll

↓

Render Final Result

Overflow Is About Boundary Control

Whenever content becomes larger than its container, CSS needs a rule that determines whether the extra content remains visible, gets hidden, gets clipped, or becomes scrollable.

What is CSS Overflow?

CSS overflow describes the situation where content extends beyond the available width or height of its containing element.

The overflow property controls how the browser handles that extra content.

Basic Syntax

selector {
    overflow: value;
}

Example

.box {
    width: 300px;
    height: 150px;

    overflow: auto;
}

Basic Overflow

Container
┌──────────────────────────────┐
│ Visible Content              │
│                              │
│ Available Space              │
└──────────────────────────────┘
Extra Content
Extra Content
Extra Content
      ↑
      │
   Overflow

Overflow Requires Limited Space

Overflow usually becomes noticeable when an element has a limited width, height, max-width, or max-height and the content requires more space.

Why Do We Need Overflow?

Without overflow control, large content can escape its container, overlap other elements, break layouts, or create unwanted page-level scrolling.

Create Scrollable Areas

Allow users to scroll through content inside a limited space.

Hide Extra Content

Prevent content from appearing outside container boundaries.

Handle Wide Content

Provide horizontal scrolling for tables and code blocks.

Handle Tall Content

Create vertically scrollable panels and sidebars.

Clip Images

Keep images and decorative content inside rounded containers.

Protect Responsive Layouts

Prevent oversized content from breaking narrow screens.

Uncontrolled Overflow

Content escapes containers.
Elements may overlap.
Layouts can break.
Unexpected page scrolling may appear.

Controlled Overflow

Content stays manageable.
Scrollbars appear when needed.
Extra content can be clipped.
Layouts remain stable.

Real-World Analogy

Imagine filling a glass with water.

The glass represents the container, while the water represents the content. When too much water is added, it exceeds the available space.

Glass Analogy

Container = Glass
Content   = Water


Normal Content

     ┌────────────┐
     │ ~~~~~~~~~~ │
     │ ~~~~~~~~~~ │
     │ ~~~~~~~~~~ │
     │            │
     └────────────┘


Overflowing Content

       ~~~~~~~~~~
       ~~~~~~~~~~   ← Extra Content
     ┌────────────┐
     │ ~~~~~~~~~~ │
     │ ~~~~~~~~~~ │
     │ ~~~~~~~~~~ │
     └────────────┘

Real-World Action	CSS Overflow Behavior
Let water spill outside	overflow: visible
Hide spilled water	overflow: hidden
Provide access every time	overflow: scroll
Provide access only when needed	overflow: auto
Cut content exactly at boundary	overflow: clip

Overflow Property Syntax

Syntax

.element {
    overflow: visible;
}

Common Examples

.visible {
    overflow: visible;
}

.hidden {
    overflow: hidden;
}

.scroll {
    overflow: scroll;
}

.auto {
    overflow: auto;
}

.clipped {
    overflow: clip;
}

Overflow Controls Both Directions

The overflow shorthand can control horizontal and vertical overflow together. Separate overflow-x and overflow-y properties can control each direction independently.

Why Overflow Happens

Overflow happens whenever the required content size becomes larger than the space available inside its container.

Fixed Height

Content becomes taller than a container with a fixed height.

Fixed Width

Wide content exceeds a container with limited width.

Long Words

Unbroken text may extend beyond narrow containers.

Large Images

Images can be wider than their parent elements.

Wide Tables

Many columns can exceed the available screen width.

Code Blocks

Long lines of code may require horizontal scrolling.

Overflow Detection

Container Size
┌──────────────────────────────┐
│ Width: 300px                 │
│ Height: 150px                │
└──────────────────────────────┘

Content Required Size
┌──────────────────────────────────────┐
│ Width: 500px                         │
│ Height: 300px                        │
└──────────────────────────────────────┘

Result

Content Width  > Container Width  → X Overflow
Content Height > Container Height → Y Overflow

Overflow Values

Value	Behavior
visible	Extra content remains visible outside the container
hidden	Extra content is hidden
scroll	Scrollbars are provided
auto	Scrollbars appear when required
clip	Content is clipped at the overflow boundary

Quick Comparison

visible
┌──────────────┐
│ Content      │
└──────────────┘
Extra Content


hidden
┌──────────────┐
│ Content      │
└──────────────┘
Extra is hidden


scroll
┌──────────────┐
│ Content    ↕ │
│            ↕ │
└──────────↔───┘


auto
Scrollbar appears
only when necessary


clip
Content is cut at
the container boundary

1. overflow: visible

The value overflow: visible allows overflowing content to remain visible outside the element boundaries.

This is the default overflow value.

Visible Overflow

.box {
    overflow: visible;
}

Extra content remains visible.
No internal scrollbar is created.
Content can extend beyond the container.
Overflowing content may overlap nearby elements.
It is the default behavior.

Visible Behavior

┌──────────────────────────┐
│ Container                │
│                          │
│ Visible Content          │
└──────────────────────────┘
Overflowing Content
Remains Visible
Outside the Container

Example 1: Visible Overflow

HTML

<div class="box">
    CSS overflow controls what happens when
    content becomes larger than the available
    space inside an element. This content is
    intentionally longer than the box height.
</div>

CSS

.box {
    width: 300px;
    height: 100px;

    padding: 20px;

    overflow: visible;

    border: 2px solid #6c5ce7;

    background: #f5f3ff;
}

Visible Content Can Overlap

Because the extra content is allowed outside the box, it may overlap elements that appear below or beside the container.

2. overflow: hidden

The value overflow: hidden prevents overflowing content from being visually displayed outside the element boundaries.

Hidden Overflow

.box {
    overflow: hidden;
}

Extra content is hidden from view.
No visible scrollbar is shown.
The container keeps its dimensions.
Content outside the boundary is not visually displayed.
It is commonly used for clipping images and decorative content.

Hidden Behavior

Original Content

┌──────────────────────────┐
│ Visible Content          │
│ Visible Content          │
└──────────────────────────┘
Hidden Content
Hidden Content


Rendered Result

┌──────────────────────────┐
│ Visible Content          │
│ Visible Content          │
└──────────────────────────┘

Everything below the boundary
is visually hidden.

Example 2: Hidden Overflow

HTML

<div class="box">
    This content is longer than the available
    height. The extra content will be hidden
    because overflow is set to hidden.
</div>

CSS

.box {
    width: 300px;
    height: 120px;

    padding: 20px;

    overflow: hidden;

    background: #6c5ce7;
    color: white;

    border-radius: 10px;
}

3. overflow: scroll

The value overflow: scroll creates a scrollable area so users can access content that does not fit inside the container.

Scrollable Overflow

.box {
    overflow: scroll;
}

Depending on the browser and operating system, scrollbars may remain visible even when the content does not require scrolling.

Scroll Behavior

┌─────────────────────────────┐
│ Content                   ▲ │
│ Content                   │ │
│ Content                   │ │
│ Content                   ▼ │
├─────────────────────────────┤
│ ◄───────────────────────►   │
└─────────────────────────────┘

The user can scroll to access
overflowing content.

Example 3: Scrollable Box

HTML

<div class="scroll-box">
    <h3>CSS Overflow</h3>

    <p>
        Overflow controls content that exceeds
        the boundaries of an element.
    </p>

    <p>
        The scroll value creates a scrollable area.
    </p>

    <p>
        Users can move through all available content.
    </p>
</div>

CSS

.scroll-box {
    width: 320px;
    height: 180px;

    padding: 20px;

    overflow: scroll;

    border: 2px solid #0984e3;

    border-radius: 10px;
}

4. overflow: auto

The value overflow: auto allows the browser to provide scrolling only when the content actually exceeds the available space.

Automatic Overflow

.box {
    overflow: auto;
}

overflow: scroll

Creates a scroll container.
Scrollbars may appear even when unnecessary.
Useful when scrolling should always be available.
Can consume visual space.

overflow: auto

Creates scrolling when required.
No unnecessary scrollbar in common cases.
Adapts to content size.
Commonly used for panels.

auto Is Common for Content Panels

When a panel should scroll only if its content becomes too large, overflow: auto is usually the most practical choice.

Example 4: Automatic Scrollbar

HTML

<div class="message-panel">
    <div class="message">Message 1</div>
    <div class="message">Message 2</div>
    <div class="message">Message 3</div>
    <div class="message">Message 4</div>
    <div class="message">Message 5</div>
</div>

CSS

.message-panel {
    width: 320px;
    height: 200px;

    padding: 12px;

    overflow: auto;

    background: #f5f6fa;

    border: 1px solid #dfe6e9;

    border-radius: 12px;
}

.message {
    margin-bottom: 10px;
    padding: 14px;

    background: white;

    border-radius: 8px;
}

5. overflow: clip

The value overflow: clip cuts overflowing content at the overflow boundary.

Clip Overflow

.box {
    overflow: clip;
}

Unlike hidden, clip does not create a scroll container for the clipped direction.

overflow: hidden

Hides extra content.
Creates a scroll container.
Can affect scrolling behavior.
Historically common for clipping.

overflow: clip

Clips extra content.
Does not create a scroll container.
Designed specifically for clipping.
Useful when scrolling is not wanted.

Example 5: Clipped Content

HTML

<div class="clip-box">
    This content is intentionally longer than
    the available space inside the element.
    Everything outside the boundary is clipped.
</div>

CSS

.clip-box {
    width: 300px;
    height: 100px;

    padding: 20px;

    overflow: clip;

    background: #2d3436;
    color: white;

    border-radius: 10px;
}

overflow-x Property

The overflow-x property controls horizontal overflow.

Horizontal Overflow

.element {
    overflow-x: auto;
}

It is useful for wide tables, code blocks, image strips, and other content that may exceed the available width.

Horizontal Overflow

Container Width
┌──────────────────────────────┐
│ Content extends horizontally │──────────►
│                              │
├──────────────────────────────┤
│ ◄──────────────────────────► │
└──────────────────────────────┘

overflow-x controls
left-to-right overflow.

overflow-y Property

The overflow-y property controls vertical overflow.

Vertical Overflow

.element {
    overflow-y: auto;
}

It is commonly used for chat windows, menus, notification panels, dashboards, and fixed-height content areas.

Vertical Overflow

┌────────────────────────────┐
│ Content                  ▲ │
│ Content                  │ │
│ Content                  │ │
│ Content                  ▼ │
└────────────────────────────┘
          │
          ▼
    More Content

overflow-y controls
top-to-bottom overflow.

Example 6: Horizontal Scroll

HTML

<div class="table-wrapper">
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Department</th>
            <th>Location</th>
            <th>Status</th>
        </tr>
        <tr>
            <td>Aarav</td>
            <td>aarav@example.com</td>
            <td>Development</td>
            <td>Mumbai</td>
            <td>Active</td>
        </tr>
    </table>
</div>

CSS

.table-wrapper {
    width: 100%;

    overflow-x: auto;
}

table {
    min-width: 700px;

    border-collapse: collapse;
}

th,
td {
    padding: 14px;

    border: 1px solid #dfe6e9;

    white-space: nowrap;
}

Example 7: Vertical Scroll

HTML

<div class="user-list">
    <div class="user">Aarav</div>
    <div class="user">Diya</div>
    <div class="user">Kabir</div>
    <div class="user">Meera</div>
    <div class="user">Rohan</div>
    <div class="user">Sara</div>
</div>

CSS

.user-list {
    width: 300px;
    max-height: 220px;

    overflow-y: auto;

    border: 1px solid #dfe6e9;

    border-radius: 10px;
}

.user {
    padding: 16px;

    border-bottom: 1px solid #dfe6e9;
}

Two-Value Overflow Syntax

The overflow shorthand can accept two values.

Two-Value Syntax

.element {
    overflow: hidden auto;
}

When two values are used, the first controls overflow-x and the second controls overflow-y.

Declaration	Horizontal	Vertical
overflow: auto	auto	auto
overflow: hidden auto	hidden	auto
overflow: auto hidden	auto	hidden
overflow: scroll auto	scroll	auto

Equivalent CSS

.box {
    overflow: hidden auto;
}

/* Same as */

.box {
    overflow-x: hidden;
    overflow-y: auto;
}

Overflow and Fixed Dimensions

Overflow commonly appears when a container has fixed or maximum dimensions.

Fixed Height

.panel {
    height: 250px;

    overflow-y: auto;
}

Maximum Height

.panel {
    max-height: 250px;

    overflow-y: auto;
}

Fixed Height

Container always has the specified height.
Short content leaves unused space.
Long content may overflow.
Useful for strict layouts.

Maximum Height

Container can remain smaller.
Grows until the maximum height.
Scrolls after reaching the limit.
Often better for dynamic content.

Creating Scroll Containers

An element becomes a scroll container when its overflow behavior allows content to be scrolled.

Scroll Container

.panel {
    max-height: 300px;

    overflow-y: auto;
}

Limit Container Size

↓

Add Dynamic Content

↓

Content Exceeds Limit

↓

Overflow Is Detected

↓

Scrollbar Becomes Available

↓

User Scrolls Inside Container

Chat Windows

Messages scroll inside a limited conversation area.

Notifications

Large notification lists remain inside a compact panel.

File Browsers

Long file lists scroll independently.

Dashboards

Widgets can contain their own scrollable data.

Sidebars

Navigation remains within the available viewport height.

Editors

Large text content scrolls inside an editing area.

Example 8: Notification Panel

HTML

<div class="notifications">
    <div class="notification">
        New course published
    </div>

    <div class="notification">
        Assignment completed
    </div>

    <div class="notification">
        New message received
    </div>

    <div class="notification">
        Certificate generated
    </div>

    <div class="notification">
        Profile updated
    </div>
</div>

CSS

.notifications {
    width: 340px;
    max-height: 260px;

    padding: 12px;

    overflow-y: auto;

    background: #f5f6fa;

    border-radius: 14px;
}

.notification {
    margin-bottom: 10px;
    padding: 16px;

    background: white;

    border-left: 4px solid #6c5ce7;

    border-radius: 8px;
}

Overflow and Images

Large images are a common cause of horizontal overflow.

Responsive Image

img {
    max-width: 100%;
    height: auto;
}

When an image is intentionally larger than a container, overflow can also be used to clip the image.

Image Clipping

.image-wrapper {
    overflow: hidden;

    border-radius: 16px;
}

Prevent Accidental Image Overflow

For general responsive content, max-width: 100% prevents images from becoming wider than their containers.

Example 9: Image Card

HTML

<div class="image-card">
    <div class="image">
        CSS
    </div>

    <div class="content">
        <h3>Learn CSS</h3>

        <p>
            Build modern and responsive websites.
        </p>
    </div>
</div>

CSS

.image-card {
    width: 320px;

    overflow: hidden;

    border-radius: 16px;

    box-shadow: 0 10px 30px
        rgba(0, 0, 0, 0.12);
}

.image {
    height: 180px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #6c5ce7,
        #0984e3
    );

    color: white;

    font-size: 3rem;
    font-weight: bold;
}

.content {
    padding: 20px;
}

Overflow and Long Text

Long words, URLs, file names, and generated strings can cause horizontal overflow.

Breaking Long Content

.text {
    overflow-wrap: break-word;
}

More Aggressive Breaking

.text {
    word-break: break-all;
}

Property	Purpose
overflow	Controls content outside element boundaries
overflow-wrap	Allows long words to wrap when necessary
word-break	Controls how words may break
white-space	Controls whitespace and line wrapping
text-overflow	Controls visual indication of clipped text

Text Overflow with Ellipsis

The text-overflow property can display an ellipsis when single-line text is clipped.

Single-Line Ellipsis

.title {
    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

Ellipsis Result

Original Text

Learn Advanced CSS Overflow and
Responsive Layout Techniques


Limited Width

┌──────────────────────────────┐
│ Learn Advanced CSS Overfl... │
└──────────────────────────────┘

Three Properties Work Together

For a common single-line ellipsis, use white-space: nowrap, overflow: hidden, and text-overflow: ellipsis together.

Example 10: Ellipsis

HTML

<div class="course">
    Advanced CSS Overflow and Responsive
    Layout Techniques for Modern Websites
</div>

CSS

.course {
    width: 320px;

    padding: 16px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    background: #f5f3ff;

    border-radius: 8px;
}

Multi-Line Text Clamping

Sometimes a card description should show only a limited number of lines.

Three-Line Clamp

.description {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}

This pattern limits visible text to a specific number of lines and hides the remaining content.

Example 11: Line Clamp

HTML

<p class="description">
    CSS is a powerful styling language used to
    create modern websites. It controls colors,
    spacing, typography, layouts, animations,
    responsiveness, and much more.
</p>

CSS

.description {
    width: 320px;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;

    line-height: 1.6;
}

Overflow and Border Radius

Child content may extend visually beyond a parent with rounded corners.

Clip to Rounded Corners

.card {
    overflow: hidden;

    border-radius: 16px;
}

This pattern is common for cards containing images, videos, gradients, and decorative backgrounds.

Rounded Clipping

Without Overflow Clipping

   Image Corners
┌──────────────────────┐
│ ┌──────────────────┐ │
│ │      Image       │ │
│ └──────────────────┘ │
╰──────────────────────╯


With overflow: hidden

╭──────────────────────╮
│      Image Area      │
│                     │
│      Card Content    │
╰──────────────────────╯

Child content follows
the rounded boundary.

Example 12: Clipped Card

HTML

<div class="course-card">
    <div class="banner">
        CSS
    </div>

    <div class="card-content">
        <h3>CSS Mastery</h3>

        <p>
            Learn modern CSS step by step.
        </p>
    </div>
</div>

CSS

.course-card {
    width: 320px;

    overflow: hidden;

    border-radius: 20px;

    background: white;

    box-shadow: 0 12px 35px
        rgba(0, 0, 0, 0.12);
}

.banner {
    height: 160px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #6c5ce7,
        #00b894
    );

    color: white;

    font-size: 3rem;
    font-weight: bold;
}

.card-content {
    padding: 24px;
}

Overflow and Positioning

Overflow can clip positioned descendants when they extend outside a container.

Clipping Positioned Content

.parent {
    position: relative;

    overflow: hidden;
}

.badge {
    position: absolute;

    top: -10px;
    right: -10px;
}

In this example, the part of the badge outside the parent boundary may be hidden.

Check Overflow When Overlays Disappear

If a badge, tooltip, dropdown, shadow, or decorative element is unexpectedly cut off, inspect whether an ancestor uses overflow: hidden, auto, scroll, or clip.

Overflow and Sticky Position

A sticky element is affected by its nearest relevant scrolling ancestor.

Scrollable Container

.panel {
    height: 300px;

    overflow-y: auto;
}

.header {
    position: sticky;

    top: 0;
}

The sticky header remains attached to the top of the panel while the panel content scrolls.

Overflow Can Change Sticky Behavior

If position: sticky appears not to work as expected, inspect the overflow properties of ancestor elements because they can create the scrolling context.

Overflow and Flexbox

Flex items can sometimes overflow because their default minimum size prevents them from shrinking as expected.

Common Flex Fix

.flex-item {
    min-width: 0;
}

For vertical flex layouts, min-height: 0 may be necessary when a child should become internally scrollable.

Scrollable Flex Child

.layout {
    display: flex;
    flex-direction: column;

    height: 100vh;
}

.content {
    min-height: 0;

    overflow-y: auto;
}

Overflow and Grid

Grid items can also overflow when their content requires more space than the grid track allows.

Grid Overflow Fix

.grid-item {
    min-width: 0;
}

Scrollable Grid Area

.dashboard {
    display: grid;

    grid-template-rows:
        auto minmax(0, 1fr);

    height: 100vh;
}

.dashboard-content {
    overflow-y: auto;
}

Minimum Size Matters

When content unexpectedly overflows a Flexbox or Grid layout, inspect min-width and min-height before adding more overflow rules.

Overflow vs Clip

Feature	hidden	clip	auto	scroll
Extra content visible	No	No	Through scrolling	Through scrolling
Creates scroll container	Yes	No	Yes	Yes
Scrollbar when needed	No visible bar	No	Yes	Depends on platform
Best for pure clipping	Possible	Yes	No	No
Best for dynamic panels	No	No	Yes	Possible

Choosing an Overflow Value

What should happen to extra content?

Remain visible?
      │
      └── Yes → visible

Disappear completely?
      │
      ├── Pure clipping → clip
      │
      └── Hidden scroll container → hidden

Remain accessible?
      │
      ├── Scroll only when needed → auto
      │
      └── Always create scrolling → scroll

Complete Overflow Example

The following example combines vertical scrolling, sticky positioning, horizontal overflow protection, and text truncation in a practical activity panel.

HTML

<div class="activity-panel">
    <div class="panel-header">
        <h3>Recent Activity</h3>
    </div>

    <div class="activity-list">
        <div class="activity">
            <span class="icon">📚</span>

            <div class="details">
                <strong>
                    New CSS lesson published
                </strong>

                <p>
                    CSS Overflow and Scroll Containers
                </p>
            </div>
        </div>

        <div class="activity">
            <span class="icon">✅</span>

            <div class="details">
                <strong>
                    Lesson completed successfully
                </strong>

                <p>
                    CSS Float
                </p>
            </div>
        </div>

        <div class="activity">
            <span class="icon">🏆</span>

            <div class="details">
                <strong>
                    Achievement unlocked
                </strong>

                <p>
                    CSS Layout Explorer
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.activity-panel {
    width: 360px;
    max-height: 320px;

    overflow-y: auto;
    overflow-x: hidden;

    background: #f5f6fa;

    border: 1px solid #dfe6e9;
    border-radius: 16px;
}

.panel-header {
    position: sticky;

    top: 0;
    z-index: 1;

    padding: 18px;

    background: white;

    border-bottom: 1px solid #dfe6e9;
}

.panel-header h3 {
    margin: 0;
}

.activity-list {
    padding: 12px;
}

.activity {
    display: flex;

    gap: 12px;

    margin-bottom: 10px;
    padding: 14px;

    background: white;

    border-radius: 10px;
}

.icon {
    flex-shrink: 0;

    font-size: 1.5rem;
}

.details {
    min-width: 0;
}

.details strong,
.details p {
    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.details p {
    margin: 6px 0 0;

    color: #636e72;
}

Browser Overflow Flow

The browser determines overflow after calculating the element size and the space required by its content.

Read HTML

↓

Build Document Structure

↓

Read CSS

↓

Calculate Container Size

↓

Calculate Content Size

↓

Compare Available and Required Space

↓

Detect Horizontal or Vertical Overflow

↓

Apply Overflow Rules

↓

Create Scroll Container if Needed

↓

Clip or Display Content

↓

Paint Final Layout

Overflow Processing

Container Size
      │
      ▼
Content Size
      │
      ▼
Does Content Fit?
      │
      ├── Yes
      │     └── Render Normally
      │
      └── No
            │
            ▼
     Read overflow Value
            │
   ┌────────┼────────┬────────┐
   │        │        │        │
visible   hidden   scroll    auto
   │        │        │        │
Show     Hide      Scroll   Scroll
Outside  Extra     Always   If Needed
            │
            ▼
       Final Rendering

Real-World Applications

Chat Applications

Messages scroll inside a fixed conversation panel.

Notification Panels

Long lists remain inside compact dropdowns.

Data Tables

Wide tables scroll horizontally on small screens.

Code Editors

Long code lines can scroll without breaking layouts.

Sidebars

Navigation content can scroll independently.

Image Cards

Images are clipped inside rounded containers.

Mobile Layouts

Oversized content is prevented from breaking the viewport.

Text Truncation

Long titles can display an ellipsis.

Advantages

Stable Containers

Keeps excessive content from destroying element boundaries.

Scrollable Content

Allows large content inside compact interfaces.

Visual Clipping

Hides decorative content outside intended boundaries.

Direction Control

Controls horizontal and vertical overflow independently.

Responsive Protection

Helps wide content remain usable on narrow screens.

Better Cards

Clips images and backgrounds to rounded corners.

Text Management

Supports truncation and ellipsis patterns.

Flexible Interfaces

Supports dashboards, panels, sidebars, and application layouts.

Common Beginner Mistakes

Using overflow: hidden Everywhere

This may hide important content, shadows, menus, badges, and tooltips.

Hiding the Real Layout Problem

Overflow should not be used to hide broken widths or incorrect sizing.

Forgetting Fixed Dimensions

Overflow may not become visible when the container is allowed to grow with its content.

Using scroll Instead of auto

Unnecessary scrollbars may appear when scrolling is not required.

Forgetting overflow-x

Wide tables and code blocks may create unwanted page-level horizontal scrolling.

Forgetting overflow-y

Tall panels may expand beyond the intended layout.

Hiding Important Content

Users may lose access to information when overflow is clipped without another way to view it.

Breaking Sticky Positioning

Ancestor overflow properties can change the scrolling context used by sticky elements.

Clipping Tooltips

Tooltips and dropdowns may disappear when an ancestor clips overflow.

Clipping Box Shadows

Decorative shadows extending outside a container can be cut off.

Ignoring Large Images

Images wider than their containers can create horizontal overflow.

Ignoring Long URLs

Unbroken strings may escape narrow containers.

Forgetting white-space

nowrap can intentionally or accidentally create horizontal overflow.

Using Ellipsis Incorrectly

text-overflow: ellipsis alone is usually not enough for the common single-line pattern.

Forgetting min-width: 0

Flex and Grid children may refuse to shrink and overflow unexpectedly.

Forgetting min-height: 0

Scrollable children in vertical layouts may grow instead of scrolling.

Creating Too Many Nested Scroll Areas

Multiple scrollable containers can make interfaces difficult to use.

Tiny Scroll Containers

Very small scrolling areas can be frustrating on touch devices.

Hiding Focused Content

Interactive controls should remain reachable and visible.

Ignoring Mobile Testing

Overflow problems frequently appear only on narrow screens.

Best Practices

Understand why content is overflowing before choosing a solution.
Do not use overflow: hidden only to hide layout mistakes.
Use overflow: visible when content should remain unrestricted.
Use overflow: auto when scrolling should appear only when necessary.
Use overflow: scroll when a permanent scrolling context is intentionally required.
Use overflow: clip when content should be clipped without creating a scroll container.
Use overflow-x and overflow-y when each direction needs different behavior.
Use horizontal scrolling for wide tables on small screens.
Wrap tables inside a dedicated overflow container.
Do not make the entire page horizontally scroll because of one wide component.
Use overflow-x: auto for code blocks with long lines.
Use overflow-y: auto for dynamic vertical panels.
Prefer max-height over fixed height when content length is unpredictable.
Use fixed height only when the design genuinely requires it.
Keep scroll containers large enough to remain usable.
Avoid excessive nested scrolling areas.
Test scroll behavior with a mouse.
Test scroll behavior with a touchpad.
Test scroll behavior on touch devices.
Keep important controls outside unnecessary clipping boundaries.
Check ancestor overflow when dropdowns are cut off.
Check ancestor overflow when tooltips disappear.
Check ancestor overflow when box shadows are clipped.
Check ancestor overflow when sticky positioning behaves unexpectedly.
Use max-width: 100% for responsive images.
Use height: auto to preserve image proportions.
Use overflow: hidden intentionally for rounded image cards.
Use overflow: clip when pure clipping is the actual requirement.
Do not clip essential text without providing another way to access it.
Use ellipsis for compact labels and titles when appropriate.
Use white-space: nowrap with single-line ellipsis.
Use overflow: hidden with single-line ellipsis.
Use text-overflow: ellipsis to indicate truncated text.
Use line clamping carefully for multi-line previews.
Do not hide critical instructions with line clamping.
Use overflow-wrap for long words and URLs.
Use word-break only when more aggressive breaking is acceptable.
Inspect white-space when unexpected horizontal overflow appears.
Inspect fixed widths when layouts overflow on mobile.
Inspect min-width values in Flexbox layouts.
Use min-width: 0 when a flex or grid item must shrink below its content size.
Inspect min-height values in vertical application layouts.
Use min-height: 0 when a flex child should scroll internally.
Use minmax(0, 1fr) in Grid when tracks need to shrink properly.
Do not assume overflow problems always come from the overflowing element itself.
Inspect parent and ancestor dimensions.
Inspect padding and borders.
Inspect transforms that visually move content.
Inspect absolute positioned children.
Inspect negative margins.
Inspect large fixed-width elements.
Inspect long unbroken strings.
Inspect SVG and canvas dimensions.
Inspect embedded iframes.
Use browser developer tools to find elements wider than the viewport.
Temporarily add outlines during overflow debugging.
Check document scrollWidth when debugging page-level horizontal overflow.
Test with real dynamic content.
Test unusually long names.
Test unusually long email addresses.
Test long URLs.
Test translated content.
Test increased browser zoom.
Test large text settings.
Keep scrollbars accessible.
Do not remove scrollbar visibility without a strong reason.
Make scrollable regions understandable to users.
Ensure keyboard users can reach interactive content inside scroll areas.
Keep focus indicators visible.
Avoid trapping users inside nested scrolling regions.
Use sticky headers inside long panels when they improve understanding.
Remember that overflow can establish a scrolling context.
Document intentional clipping behavior in complex components.
Keep overflow rules close to the component that needs them.
Avoid global overflow rules unless the entire application requires them.
Be cautious with body overflow: hidden.
Do not disable page scrolling accidentally.
When opening modals, manage page scroll intentionally.
Restore scrolling correctly when overlays close.
Avoid layout shifts caused by scrollbar appearance when possible.
Test across operating systems because scrollbar presentation can differ.
Do not depend on a specific scrollbar width.
Keep content usable even when overlay scrollbars are used.
Use logical sizing where appropriate.
Combine overflow with responsive design instead of treating it as a replacement.
Fix the root cause of accidental overflow.
Use overflow deliberately for intentional scrolling and clipping.

Remember the Main Rule

First determine whether the overflowing content should remain visible, disappear, or remain accessible through scrolling. Then choose visible, hidden or clip, or auto or scroll accordingly.

Frequently Asked Questions

What is CSS overflow?

CSS overflow describes content that exceeds the available boundaries of an element and the rules used to control that content.

What is the default overflow value?

The default value is visible.

What does overflow: visible do?

It allows extra content to remain visible outside the element boundaries.

What does overflow: hidden do?

It hides content that extends outside the element boundaries.

What does overflow: scroll do?

It creates a scrollable area so users can access overflowing content.

What does overflow: auto do?

It allows the browser to provide scrolling when the content exceeds the available space.

What does overflow: clip do?

It clips content at the overflow boundary without creating a scroll container for that direction.

What is the difference between hidden and clip?

Both hide extra content, but hidden creates a scroll container while clip is intended for clipping without scrolling.

What is the difference between scroll and auto?

scroll creates a scrolling context and may show scrollbars even when unnecessary, while auto provides scrolling when required.

What does overflow-x control?

It controls horizontal overflow.

What does overflow-y control?

It controls vertical overflow.

Can overflow have two values?

Yes. The first value controls horizontal overflow and the second controls vertical overflow.

What does overflow: hidden auto mean?

It means horizontal overflow is hidden and vertical overflow is automatic.

How do I make a div vertically scrollable?

Give it a limited height or max-height and use overflow-y: auto.

How do I make a table scroll horizontally?

Place the table inside a wrapper with overflow-x: auto.

How do I prevent images from overflowing?

A common responsive solution is max-width: 100% and height: auto.

How do I hide content outside rounded corners?

Apply an appropriate overflow clipping value to the rounded container.

Why is my tooltip being cut off?

An ancestor may be clipping overflow with hidden, auto, scroll, or clip.

Why is my box shadow being cut off?

A parent or ancestor may be clipping content outside its boundaries.

Why is position: sticky not working?

Ancestor overflow properties may have created a different scrolling context.

How do I show three dots after long text?

For a common single-line pattern, combine white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

Does text-overflow: ellipsis work alone?

Usually not for the common single-line pattern. It is normally combined with clipping and no wrapping.

How do I limit text to multiple lines?

A common approach uses line clamping together with overflow clipping.

Why is my Flexbox item overflowing?

Its minimum content size may prevent shrinking. min-width: 0 often solves horizontal shrinking problems.

Why is my flex child not scrolling?

In vertical layouts, the child may need min-height: 0 before overflow-y can behave as expected.

Why is my Grid item overflowing?

The item or track may have a minimum size larger than the available space. min-width: 0 or minmax(0, 1fr) may help.

Should I use overflow: hidden to fix every horizontal scrollbar?

No. First identify the element causing the overflow and fix the underlying sizing problem.

Can overflow create a scroll container?

Yes. Values such as auto, scroll, and hidden can create a scrolling context.

Can overflow affect positioned elements?

Yes. Positioned descendants can be clipped when they extend outside an ancestor that controls overflow.

Can overflow affect mobile layouts?

Yes. Wide content is a common cause of unwanted horizontal scrolling on mobile screens.

Should I hide scrollbars?

Usually not without a strong design reason because visible scrolling affordances help users understand that more content is available.

What comes after CSS Overflow?

The next lesson covers CSS Flexbox, including flex containers, main and cross axes, direction, wrapping, alignment, gap, flex items, order, grow, shrink, basis, and practical layouts.

Key Takeaways

Overflow happens when content requires more space than its container provides.
The overflow property controls extra content in both directions.
visible allows extra content to remain visible.
hidden hides extra content.
scroll creates a scrollable area.
auto provides scrolling when necessary.
clip cuts content without creating a scroll container.
overflow-x controls horizontal overflow.
overflow-y controls vertical overflow.
Two-value overflow syntax controls horizontal and vertical directions separately.
Wide tables commonly use overflow-x: auto.
Dynamic panels commonly use overflow-y: auto.
max-height is useful for content that should grow until a limit.
Large images can cause horizontal overflow.
max-width: 100% helps responsive images stay inside containers.
overflow can clip content to rounded corners.
Single-line ellipsis requires multiple CSS properties working together.
Line clamping can limit multi-line previews.
Overflow can affect positioned and sticky elements.
Flex and Grid items may need minimum-size adjustments.
Overflow should not be used to hide underlying layout problems.
Use scrolling when hidden content must remain accessible.
Use clipping only when hidden content is intentionally unnecessary.
Test overflow behavior on mobile and with real dynamic content.

Summary

CSS Overflow controls what happens when content becomes larger than the available space inside an element.

The default value overflow: visible allows extra content to extend beyond the container boundaries.

The value overflow: hidden prevents extra content from being visually displayed outside the container.

The value overflow: scroll creates a scrollable area for accessing content that does not fit.

The value overflow: auto provides scrolling when the content actually requires additional space.

The value overflow: clip cuts content at the overflow boundary without creating a scroll container.

The overflow-x and overflow-y properties control horizontal and vertical overflow independently.

Horizontal scrolling is commonly used for wide tables and code blocks, while vertical scrolling is commonly used for panels, sidebars, notifications, and chat windows.

Overflow is also useful for clipping images inside rounded cards and controlling long text with ellipsis or line clamping.

Overflow can affect positioned elements, sticky positioning, Flexbox items, Grid items, and scrolling behavior.

Before hiding overflow, always identify whether the extra content is intentional or caused by an underlying layout problem.

In the next lesson, you will learn CSS Flexbox, including flex containers, main and cross axes, direction, wrapping, alignment, gap, flex items, order, grow, shrink, basis, and complete practical layouts.