CSS Overflow Property Explained with Examples, Scroll, Hidden, Auto

Overflow

The CSS overflow property controls how content that exceeds the boundaries of an element is handled. It is commonly used to manage layouts where the content may be larger than its container.

Syntax:

selector {
  overflow: value;
}

Overflow Property Values

Value	Description
visible	Default, content is not clipped and may overflow outside the elements box.
hidden	Content that overflows is clipped and not visible.
scroll	Content is clipped, but scrollbars are always visible ( even if not needed ).
auto	Scrollbars appear only if the content overflows.
inherit	Inherits the overflow value from the parent element.
initial	Sets the overflow property to its default value ( visible ).

Example: Using overflow: scroll and overflow: hidden

<!DOCTYPE html>
<html>

<head>
  <style>
    div.scroll {
      background-color: #00ffff;
      width: 100px;
      height: 100px;
      overflow: scroll;
    }

    div.hidden {
      background-color: #00FF00;
      width: 100px;
      height: 170px;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <p>The <strong>overflow</strong> property specifies what to do if content exceeds an element's size.</p>

  <p><strong>overflow: scroll</strong></p>
  <div class="scroll">
    You can use the overflow property when you want to have better control of the layout. The default value is visible.
  </div>

  <p><strong>overflow: hidden</strong></p>
  <div class="hidden">
    You can use the overflow property when you want to have better control of the layout. The default value is visible.
  </div>
</body>

</html>

Output:

Related Properties

Property	Description
overflow-x	Controls horizontal overflow ( left/right content ).
overflow-y	Controls vertical overflow ( top/bottom content ).
overflow-wrap	Breaks long words that would otherwise overflow their container.

Use Cases

When displaying text in a fixed-sized card or container.

Managing layout for modal boxes, tooltips or widgets.

Creating scrollable sections or sidebars.