CSS Overflow

The overflow property in CSS is used to control what happens when the content of an element exceeds its specified dimensions. It determines how content that overflows the element’s box is handled.

Syntax

selector {
  overflow: value;
}

Try It Now

  • value: Specifies how to handle overflow. Possible values are:
    • visible (default): Content is not clipped and may overflow outside the element’s box.
    • hidden: Content is clipped, and the overflow is not visible.
    • scroll: Content is clipped, but scrollbars are added to view the overflowing content.
    • auto: Content is clipped, and scrollbars are added only if necessary.

Examples

1. Default Behavior (visible)

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      overflow: visible; /* Default behavior */
    }
  </style>
</head>
<body>
  <div class="box">
    This is a long text that overflows the box. It will not be clipped.
  </div>
</body>
</html>

Try It Now

2. Clipping Content (hidden)

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      border: 2px solid red;
      overflow: hidden; /* Content is clipped */
    }
  </style>
</head>
<body>
  <div class="box">
    This is a long text that overflows the box. It will be clipped and not visible.
  </div>
</body>
</html>

Try It Now

3. Adding Scrollbars (scroll)

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      border: 2px solid green;
      overflow: scroll; /* Scrollbars always visible */
    }
  </style>
</head>
<body>
  <div class="box">
    This is a long text that overflows the box. Scrollbars will appear to view the rest of the content.
  </div>
</body>
</html>

Try It Now

4. Scrollbars Only When Needed (auto)

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      border: 2px solid orange;
      overflow: auto; /* Scrollbars appear only if necessary */
    }
  </style>
</head>
<body>
  <div class="box">
    This is a long text that overflows the box. Scrollbars will appear only if the content exceeds the box size.
  </div>
</body>
</html>

Try It Now

Advanced Usage

overflow-x and overflow-y

The overflow property can be applied to the horizontal (overflow-x) and vertical (overflow-y) axes independently.

.box {
  width: 200px;
  height: 100px;
  overflow-x: auto; /* Horizontal scrolling */
  overflow-y: hidden; /* No vertical scrolling */
}

Try It Now

Combining overflow with text-overflow

The text-overflow property works with overflow to handle text that overflows a container.

.box {
  width: 200px;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Clip overflowing text */
  text-overflow: ellipsis; /* Add ellipsis (...) for clipped text */
}

Try It Now

Overflow with Scrollbars

Customizing Scrollbars

You can style scrollbars using the ::-webkit-scrollbar pseudo-element (works in WebKit-based browsers like Chrome and Edge).

.box::-webkit-scrollbar {
  width: 10px;
}

.box::-webkit-scrollbar-thumb {
  background-color: darkgray;
  border-radius: 5px;
}

.box::-webkit-scrollbar-track {
  background-color: lightgray;
}

Try It Now

Browser Support

The overflow property is widely supported in modern browsers.

Browser Support
Chrome Yes
Firefox Yes
Edge Yes
Safari Yes
Internet Explorer Yes

Best Practices

  1. Use overflow: auto; to ensure scrollbars appear only when necessary.
  2. Combine overflow-x and overflow-y for finer control.
  3. Avoid overflow: scroll; unless scrollbars are always required.
  4. Use text-overflow and white-space for text clipping with ellipsis.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      width: 300px;
      height: 150px;
      background-color: lightgray;
      border: 2px solid black;
      overflow: auto; /* Scrollbars appear if needed */
    }

    .content {
      width: 400px;
      height: 300px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">This is a larger box inside a smaller container. Scrollbars will appear to view the overflowing content.</div>
  </div>
</body>
</html>

Try It Now

This example demonstrates how overflow works with nested elements and scrollbars. Experiment with different values to see how they affect the layout!