Overflow — What Happens When Content Is Too Big

When an element has a fixed height (or width) and its content is larger than that space, CSS has to decide what to do. The default behavior may surprise you — and knowing how to control it prevents a common class of layout bugs.

What overflow is

Overflow happens when the content of an element is larger than the element’s defined dimensions. This can happen vertically (content taller than height) or horizontally (content wider than width).

The overflow property controls what happens in that situation.

overflow values

overflow: visible (the default)

Content spills outside the element’s box — it is not clipped and it is visible, but it does not affect layout. Other elements do not move to accommodate the overflowing content; the overflow just renders on top of or beside them.

.tour-card {
  height: 150px;
  overflow: visible; /* content will spill below the card */
}

This is why you sometimes see text rendering outside a container that seems too small for it.

overflow: hidden

Content is clipped at the element’s boundary. Anything outside the box is invisible.

.tour-card {
  height: 150px;
  overflow: hidden; /* content is cut off at 150px */
}

overflow: hidden also has a side effect: it creates a block formatting context, which means floated children are contained within the element rather than escaping it. This is occasionally useful but the main use is simply clipping content.

overflow: scroll

Always shows scrollbars — even if the content fits. On macOS, scrollbars may only appear on hover, but the space is reserved. On Windows, scrollbars are always visible.

.code-block {
  overflow: scroll;
}

overflow: auto (preferred for scrollable regions)

Shows scrollbars only when content actually overflows. This is the most user-friendly option for scrollable containers.

.scrollable-tour-list {
  height: 400px;
  overflow: auto;
}

overflow-x and overflow-y

You can control horizontal and vertical overflow independently:

.wide-table-wrapper {
  overflow-x: auto;  /* horizontal scroll when needed */
  overflow-y: visible; /* vertical overflow shows normally */
}

A common use case: data tables on small screens. Allow horizontal scrolling for wide tables while keeping the page layout intact vertically.

Text overflow with ellipsis

A frequent design pattern is to truncate long text with an ellipsis (…) when it overflows a constrained container. This requires three properties working together:

.tour-title {
  white-space: nowrap;       /* prevent text from wrapping */
  overflow: hidden;          /* clip the overflow */
  text-overflow: ellipsis;   /* show ... at the point of clipping */
}

All three are required. Without white-space: nowrap, the text wraps instead of overflowing. Without overflow: hidden, there is nothing to clip. Without text-overflow: ellipsis, the clip is abrupt with no indicator.

Real-world use: card titles, nav items, table cells — anywhere you need text to stay on one line and signal gracefully when it’s been cut.

Common overflow situations

Long text in a fixed-height card:

.tour-card-description {
  max-height: 100px;
  overflow: auto;
}

Gives the description a maximum height with a scrollbar if it runs long.

Wide image in a narrow container:

.card-image {
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* crops the image to fit, no distortion */
}

Horizontal scroll for a data table:

.table-wrapper {
  overflow-x: auto;
}

Wrap the <table> in a div.table-wrapper and the table can scroll horizontally without breaking the page layout.

Exercise

Apply overflow control to two elements on the Summit Trail Outfitters site:

1. Scrollable tour description — give the tour card description a max height and make it scrollable if the text is long:

.tour-card-description {
  max-height: 120px;
  overflow: auto;
  line-height: 1.6;
}

Open the tours page and add a long description to one tour card in the HTML to trigger the overflow. Confirm a scrollbar appears.

2. Truncated tour title — if you have tour titles that might be too long for their container, apply the ellipsis pattern:

.tour-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

Temporarily make one tour name very long in the HTML to see the ellipsis in action, then restore the original text.

In DevTools, inspect the overflowing element. The Computed tab will show the element’s declared height and the overflow value. In the Elements panel, the element’s scrollable area is indicated by a dashed outline around the scroll region.

Module 03 Recap

• Every HTML element is a box with four layers: content, padding, border, margin (inside out).
• box-sizing: border-box makes width and height include padding and border — apply it globally.
• Padding is internal space (fills with background); margin is external space (always transparent).
• Shorthand margin/padding: 1 value = all sides, 2 = top/bottom + left/right, 4 = TRBL clockwise.
• margin: 0 auto centers a block element horizontally.
• Vertical margins between adjacent blocks collapse to the larger value.
• Borders require width + style + color; shorthand is border: 2px solid #color.
• border-radius rounds corners; 50% creates a circle.
• display controls how an element participates in flow: block takes the full row, inline flows with text, inline-block flows inline but accepts all box model properties.
• overflow: auto shows scrollbars only when needed; overflow: hidden clips; text-overflow: ellipsis truncates text.

Module 04 moves from structure to style: color formats, web fonts, and typography — turning the STO site from a well-spaced skeleton into a visually polished product.