❮ Previous Next ❯

CSS Overflow

  • Learn CSS overflow to manage content exceeding container boundaries using scroll, hidden, or auto.

  • What Is CSS overflow ?

    The CSS overflow property controls what should happen when content becomes larger than its container (width or height).

    In simple words:

    overflow decides whether extra content is shown, hidden, or scrollable.

    Important:
     Overflow matters only when an element has a fixed size (width or height).

    Why Is CSS Overflow Important ?

    Without overflow control:

    Content spills outside containers
    Layout breaks
    Text overlaps other elements

    With proper overflow control:

    Clean layout
    Scrollable content areas
    Professional and readable UI

    Real-life comparison:
    A glass filled with too much water
    • Let it spill
    • Cover it
    • Use a container that handles overflow

    CSS overflow works the same way.

    CSS Overflow Values

    CSS provides four main overflow values:

    visible | hidden | scroll | auto

    overflow: visible (Default)

    What it does:

    • Content is not clipped
    • Extra content flows outside the container

Overflow: Visible

overflow: visible; allows content to flow outside the container without being clipped (default behavior). 

.box {
  width: 200px;
  height: 100px;
  overflow: visible;
}

  • Content spills out

    Real-life comparison:
    An overfilled suitcase with clothes sticking out.

    overflow: hidden

    What it does:

    • Extra content is cut off
    • Overflowing content is not visible
    • No scrollbars appear

Overflow: Hidden

overflow: hidden; clips extra content that exceeds the container’s size and does not show scrollbars. 

.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

  • Clean edges
    Hidden content cannot be accessed

    Real-life comparison:
    Closing a box lid to hide extra items inside.

    overflow: scroll

    What it does:

    • Content becomes scrollable
    • Scrollbars are always visible
    • Even when content fits

Overflow: Scroll

overflow: scroll; makes content scrollable and always shows scrollbars, even if the content fits inside the container. 

.box {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

  • User can always scroll

    Real-life comparison:
    A drawer with handles visible even when empty.

    overflow: auto (Most Used)

    What it does:

    • Scrollbars appear only when needed
    • Automatically adapts to content size

Overflow: Auto

overflow: auto; shows scrollbars only when the content exceeds the container size. 

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

  • Clean UI
    Best balance between control and usability

    Real-life comparison:
    Automatic doors that open only when someone approaches.

    Directional Overflow Control

    You can control overflow separately for horizontal and vertical directions.

    Horizontal Overflow (overflow-x)

Horizontal Overflow (overflow-x)

overflow-x controls horizontal overflow and manages scrolling or clipping along the x-axis. 

.box {
  overflow-x: scroll;
}
  • Vertical Overflow (overflow-y)

Vertical Overflow (overflow-y)

overflow-y controls vertical overflow and manages scrolling or clipping along the y-axis. 

.box {
  overflow-y: auto;
}

  • Common Real-World Pattern

Mixed Overflow Control Pattern

Using overflow-x: hidden; and overflow-y: auto; hides horizontal overflow while allowing vertical scrolling when needed. 

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

  • No horizontal scrolling
    Vertical scrolling allowed

    Real-life comparison:
    Reading a long document vertically.

    Text Overflow (text-overflow)

    Used when text is longer than its container.

Text Overflow with Ellipsis

text-overflow: ellipsis; adds "..." when text exceeds its container width. 

.text {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  • Displays ... when text is too long

    Real-life comparison:
    File names shortened with dots on a computer screen.

Scrollable Content Box Example

This example shows how overflow: auto; creates a scrollable box when content exceeds the defined height. 

<!DOCTYPE html>
<html>
<head>
    <title>Scrollable Box Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .content-box {
            width: 250px;
            height: 100px;
            border: 2px solid #333;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="content-box">
        This is a long paragraph of text that exceeds the height of the box and
        demonstrates how overflow works in CSS when content is too large.
        Scrollbars will appear only if the content is bigger than the container.
    </div>
</body>
</html>

  • Box keeps fixed size
    Scrollbar appears when needed
    Layout remains clean

    Overflow & Layout Safety

    Overflow is commonly used to:

    Prevent layout breaking
    Contain large or dynamic content
    Create scrollable sections (cards, panels, modals)

    Common Mistakes

    Using overflow without defining height or width
    Hiding important content with overflow: hidden
    Creating unnecessary scrollbars
    Ignoring mobile scrolling behavior

    Best Practices for CSS Overflow

    Prefer overflow: auto
    Avoid horizontal scrolling whenever possible
    Ensure hidden content is accessible
    Test scrolling on mobile devices
    Add padding for better readability

    • Overflow handles extra content
    • hidden → cut off
    • scroll → always scroll
    • auto → smart scrolling

    CSS overflow controls excess content
    Four main values: visible, hidden, scroll, auto
    Works when container size is restricted
    Essential for scrollable UI components
    Key concept for clean, stable layouts

❮ Previous Next ❯