Sizing & overflow diagnosis

Debug a card that escapes the screen

Lesson 19 of 20 · 14 min · Module 6: Responsive systems & a second project

A layout may look correct on a laptop while a fixed width forces horizontal scrolling on a phone. Measure the problem before hiding it.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Measure a horizontal overflow problem
Repair sizing instead of concealing content

The idea

A declared width does not always include padding and borders. box-sizing: border-box makes that relationship explicit. Flexible widths and safe word wrapping help content stay inside its container.

.panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  overflow-wrap: anywhere;
}

01Check the outer bounds

At a narrow viewport, a fixed 600px card cannot fit. Its padding and border can make it larger still under the default content-box model.

02Check the content too

A flexible card can still overflow when it contains a long unbroken value. Allow wrapping where an otherwise unbreakable string needs it.

03Verify several widths

The checks compare the card’s bounds with the viewport and its scroll width with its own available width. They catch both container overflow and content overflow.

Your turn

Repair article.panel so it fits at viewport widths 320px and 900px. Keep 24px padding, use border-box sizing, width 100%, max-width 600px, and overflow-wrap anywhere. Keep the long link visible. Do not hide the overflow to conceal the problem.

What the checks look for

Card uses border-box sizing
Card keeps its 24px padding
Long words can wrap
The resource link remains present
Card and content fit a 320px viewport
Card and content fit a 900px viewport
Overflow is not hidden to mask the issue

Try it in the editor →

Take this with you

A good responsive repair preserves the content as well as the outline of the card.

Go a little further

Place the repaired card inside a two-column grid and investigate when min-width:0 is useful on a grid child.