Overflow and Scrolling

5 min read

Controlling What Happens When Content Overflows

When content is larger than its container, CSS needs to know what to do. The overflow property controls whether extra content is clipped, hidden, scrollable, or visible.

css

.box {
  width: 200px;
  height: 100px;

  /* visible — default, overflows the box (can cause layout shifts) */
  overflow: visible;

  /* hidden — clips the overflow with no scrollbar */
  overflow: hidden;

  /* scroll — always shows scrollbars */
  overflow: scroll;

  /* auto — shows scrollbars only when needed (usually best) */
  overflow: auto;
}

/* Truncate text with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

overflow: hidden on a parent also prevents absolute-positioned children from escaping the parent's visual bounds. It also creates a new Block Formatting Context, which collapses floats.

Ready to test yourself?

Practice CSS— quiz & coding exercises