CSS Overflow

by

In CSS Overflow property controls how content behaves when it exceeds the size of its container. By default, content that overflows a box might be visible, hidden, or scrollable based on the applied overflow value. The overflow property helps manage scrolling behavior, visibility, and layout consistency in web design.

There are six main overflow values:

  1. visible – Content overflows outside the box (default).
  2. hidden – Content is clipped and cannot be scrolled.
  3. scroll – Always shows scrollbars, even if not needed.
  4. auto – Adds scrollbars only when necessary.
  5. overflow-x & overflow-y – Controls horizontal and vertical scrolling separately.
  6. clip – Completely cuts off overflow, even from JavaScript.

1. CSS Overflow : visible (default behavior)

What is it?

The visible property is the default behavior for most elements. It means that if the content inside an element is larger than the container, the content overflows the container and remains visible outside its boundaries. No scrollbars appear, and there is no clipping of content.

How does it work?

  • The browser does not restrict content to fit within the element’s defined width and height.
  • Any overflowing content will simply be displayed outside of the element’s box.

Example Scenario:

Imagine you have a div with a set width of 200px and height of 100px, but the text inside is much longer than this space allows. With overflow: visible;, the extra text spills out beyond the container’s borders.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: Visible</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow: visible; /* Default behavior */
            background-color: lightgray;
        }

        .content {
            width: 300px; /* Exceeds container width */
            height: 150px; /* Exceeds container height */
            background-color: lightblue;
        }
    </style>
</head>
<body>

    <h2>Overflow: Visible</h2>
    <div class="container">
        <div class="content">This content is larger than the container and will overflow, but it will still be visible.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • The overflowing content does not get cut off.
  • No scrollbars appear, even when content exceeds the container size.
  • This is useful when you want overflowing content to remain accessible.
  • Can create layout issues if content overlaps other elements.

2. Overflow: hidden

What is it?

When you use overflow: hidden;, any content that exceeds the container’s width or height is clipped (cut off). The hidden part cannot be seen or accessed by scrolling.

How does it work?

  • The browser keeps the content inside the element’s defined dimensions.
  • If the content overflows, it simply gets cut off, and there is no way to see it.
  • Unlike scroll, this does not add scrollbars, meaning users cannot access the hidden part.

Example Scenario:

A div contains a long paragraph of text. Instead of the text spilling out beyond the container, it gets cut off at the container’s borders.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: Hidden</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow: hidden; /* Cuts off overflowing content */
            background-color: lightgray;
        }

        .content {
            width: 300px; /* Exceeds container width */
            height: 150px; /* Exceeds container height */
            background-color: lightblue;
        }
    </style>
</head>
<body>

    <h2>Overflow: Hidden</h2>
    <div class="container">
        <div class="content">This content is larger than the container, but the overflowed part is hidden and cannot be seen.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • Keeps layouts clean by preventing overflow.
  • Helps hide unwanted content while maintaining structure.
  • Users cannot access the hidden content, which may be problematic in some cases.

3. Overflow: scroll

What is it?

When you use overflow: scroll;, the browser forces scrollbars to appear, even if the content does not overflow the container.

How does it work?

  • Unlike hidden, the overflowed content is still accessible—users can scroll to see it.
  • Scrollbars are always present, even when unnecessary.
  • Works well for creating fixed-size scrollable areas.

Example Scenario:

You have a div containing a long list of items, and you want users to be able to scroll through them.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: Scroll</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow: scroll; /* Forces scrollbars */
            background-color: lightgray;
        }

        .content {
            width: 300px;
            height: 150px;
            background-color: lightblue;
        }
    </style>
</head>
<body>

    <h2>Overflow: Scroll</h2>
    <div class="container">
        <div class="content">This content is larger than the container, and scrollbars will always be visible.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • Users can scroll to see overflowed content.
  • Useful for fixed-size content areas.
  • Scrollbars always appear, even if the content fits.

4. Overflow: auto

What is it?

  • The auto value automatically adds scrollbars only if the content overflows.
  • If the content fits inside the container, no scrollbars appear.
  • If the content exceeds the container’s width or height, scrollbars appear automatically.

How does it work?

  • Acts like scroll, but only shows scrollbars when necessary.
  • Helps create dynamic layouts where content size is unknown.
  • Unlike hidden, users can still access the overflowing content by scrolling.

Example Scenario:

You have a text box that can contain varying amounts of text. Scrollbars should appear only if the content overflows the container.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: Auto</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow: auto; /* Scrollbars appear only if needed */
            background-color: lightgray;
        }

        .content {
            width: 300px; /* Exceeds container width */
            height: 150px; /* Exceeds container height */
            background-color: lightblue;
        }
    </style>
</head>
<body>

    <h2>Overflow: Auto</h2>
    <div class="container">
        <div class="content">This content overflows, so scrollbars will appear only if necessary.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • If content fits inside, no scrollbars appear.
  • If content overflows, scrollbars appear automatically.
  • Best for dynamic or flexible content areas.
  • May cause layout shifts when scrollbars appear or disappear.

5. Overflow-X & Overflow-Y

What is it?

  • overflow-x: Controls horizontal scrolling (left to right).
  • overflow-y: Controls vertical scrolling (top to bottom).
  • You can set them independently to allow scrolling in one direction only.

How does it work?

  • Prevents unnecessary scrolling in one direction while allowing it in another.
  • Great for tables, sliders, and large horizontal/vertical content sections.
  • Helps maintain a cleaner UI by controlling overflow behavior in specific directions.

Example Scenario:

You have a wide table that needs horizontal scrolling, but vertical scrolling is not allowed.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow-X & Overflow-Y</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow-x: scroll; /* Allows horizontal scrolling */
            overflow-y: hidden; /* Prevents vertical scrolling */
            background-color: lightgray;
            white-space: nowrap; /* Prevents text wrapping */
        }

        .content {
            width: 400px; /* Exceeds container width */
            height: 80px; /* Fits inside container height */
            background-color: lightblue;
            display: inline-block;
        }
    </style>
</head>
<body>

    <h2>Overflow-X & Overflow-Y</h2>
    <div class="container">
        <div class="content">This content is wider than the container, so you can scroll horizontally but not vertically.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • Allows scrolling in only one direction (horizontal or vertical).
  • Prevents unwanted vertical overflow while keeping horizontal scrolling.
  • Great for tables, image galleries, or sliders.
  • Can be confusing for users if horizontal scrolling is unexpected.

6. Overflow: clip (CSS Level 3 Feature)

What is it?

  • Works like hidden, but it strictly clips content that overflows.
  • Even JavaScript cannot scroll to reveal the clipped content.
  • Useful when you want to completely hide overflowing elements without scrollbars.

How does it work?

  • Content that overflows is completely invisible and cannot be accessed.
  • Unlike hidden, which sometimes allows scrolling via JavaScript, clip prevents scrolling entirely.
  • Best for strict layouts where no overflow should ever be visible or scrollable.

Example Scenario:

You have a fixed-size card and want to completely prevent any overflow from being seen or accessed.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: Clip</title>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            overflow: clip; /* Content is completely cut off */
            background-color: lightgray;
        }

        .content {
            width: 300px; /* Exceeds container width */
            height: 150px; /* Exceeds container height */
            background-color: lightblue;
        }
    </style>
</head>
<body>

    <h2>Overflow: Clip</h2>
    <div class="container">
        <div class="content">This content is larger than the container but is completely clipped.</div>
    </div>

</body>
</html>
HTML

Key Takeaways:

  • Content is completely cut off, even from JavaScript.
  • Ensures no visible overflow under any circumstances.
  • Useful for strict UI layouts where overflow is not allowed.
  • Content cannot be accessed, which may not always be desirable.