CSS Overflow

CSS Overflow

The overflow property controls what happens when content is larger than its container. It is commonly used to handle scrolling, clipping, and hidden content.

Overflow Values

CSS provides several values to control overflow behavior:

• visible – content overflows the container (default)
• hidden – extra content is clipped
• scroll – scrollbars are always shown
• auto – scrollbars appear only when needed

Overflow: visible

This is the default behavior. Content is allowed to overflow the container.

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

Overflow: hidden

Extra content is hidden and not accessible.

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

This is often used to clip content or hide decorative overflow.

Overflow: scroll

Scrollbars are always visible, even if the content fits inside the container.

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

Overflow: auto

Scrollbars appear only when the content exceeds the container size.

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

Overflow X and Y

You can control horizontal and vertical overflow separately using overflow-x and overflow-y.

.container {
  width: 300px;
  height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
}

Overflow and Text

Overflow is often combined with text handling properties.

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

This creates a single-line text with an ellipsis when it overflows.

Code Challenge

Goal: Handle overflowing content inside a card.

HTML:

<div class="card">
  <p>
    This is a long paragraph that will not fit inside the fixed-height card
    and should demonstrate overflow behavior.
  </p>
</div>

Task:

• Set a fixed height for the card
• Hide horizontal overflow
• Allow vertical scrolling when content is too long

Try a Solution:

.card {
  width: 320px;
  height: 120px;
  padding: 12px;
  border: 1px solid #ddd;
  overflow-x: hidden;
  overflow-y: auto;
}

What’s Next?

Next, you will learn how floating elements work in CSS.