Most layout bugs aren’t “broken CSS” — they’re drift. A codebase survives years of quick fixes, half-migrations, inconsistent component rules, and “temporary” spacing tweaks. Then one day a toolbar overflows, a card grid shifts, or a single long URL detonates a row.
These 10 one-line overrides are my go-to stabilisers. They’re not a new design system. They’re triage: small, surgical lines that make mature UIs behave now, without rewriting everything.
When a mature layout starts drifting, I reach for these 10 one-liners to make sizing predictable, stop overflow, tame text/media, and isolate “hot” components — fast.
- Start with predictability:
box-sizing, media clamping, and spacing viagap. - Fix overflow at the source:
min-width: 0and wrapping toolbars. - Harden text and images: safe breaks, truncation, and
object-fit. - Use containment carefully to reduce the blast radius of heavy widgets.
Copy pack: all 10 fixes in one place
Paste this into a legacy overrides.css file (or scope it to a page wrapper). Each rule is still one line —
it’s just formatted to be readable.
/* 10 layout stabilisers (one rule per line) */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space, 12px); }
.flex-child { min-width: 0; }
.toolbar { flex-wrap: wrap; }
body { overflow-x: hidden; } /* use as a temporary patch */
.prose { overflow-wrap: anywhere; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.widget { contain: layout paint; }Rendered HTML: “bad CSS” vs “fixed CSS”
Same markup, two states. On desktop these appear side-by-side. On mobile they stack vertically. The “bad” pane intentionally shows drift and overflow cues.
The exact “bad” CSS used above
/* Bad demo CSS (intentional drift) */
.p32-demo-bad * { box-sizing: content-box; }
.p32-demo-bad .toolbar { flex-wrap: nowrap; }
.p32-demo-bad .prose { overflow-wrap: normal; word-break: normal; }
.p32-demo-bad svg { width: 900px; height: 140px; display: block; }
.p32-demo-bad img { width: 100%; height: 100%; }The exact “fixed” CSS used above
/* Fixed demo CSS (the 10 guardrail lines, scoped) */
.p32-demo-fixed *, .p32-demo-fixed *::before, .p32-demo-fixed *::after { box-sizing: border-box; }
.p32-demo-fixed img, .p32-demo-fixed video, .p32-demo-fixed svg { max-width: 100%; height: auto; }
.p32-demo-fixed .stack { display: flex; flex-direction: column; gap: 12px; }
.p32-demo-fixed .flex-child { min-width: 0; }
.p32-demo-fixed .toolbar { flex-wrap: wrap; }
.p32-demo-fixed { overflow-x: hidden; }
.p32-demo-fixed .prose { overflow-wrap: anywhere; }
.p32-demo-fixed .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p32-demo-fixed .card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p32-demo-fixed .widget { contain: layout paint; }Why CSS breaks in mature codebases
Accumulation beats correctness
A single component can be “correct,” yet the page still breaks because adjacent rules compound: margins stack, max-widths conflict, flex items refuse to shrink, and one long token (URL, UUID, email) detonates a row.
Overrides as triage (not ideology)
I treat these as stabilisers. They buy time, reduce incidents, and often become the permanent guardrails that a design system should have had from day one.
Lines 1–3: Make sizing and spacing predictable
1) Border-box everywhere
Line:
*, *::before, *::after { box-sizing: border-box; }What it fixes: “Why did adding padding make this element overflow?” Border-box makes width/height include padding and border.
2) Clamp runaway media
Line:
img, video, svg { max-width: 100%; height: auto; }If you only add one global rule to a content-heavy app, make it this. Runaway SVGs and images are a common source of “mystery horizontal scroll.”
3) Use gap instead of margin stacking
Line:
.stack { display: flex; flex-direction: column; gap: var(--space, 12px); }Lines 4–6: Stop flex/grid from overflowing
4) The min-width: 0 fix (aka “why won’t it shrink?”)
Line:
.flex-child { min-width: 0; }5) Let reality wrap (toolbars, filters, chip rows)
Line:
.toolbar { flex-wrap: wrap; }6) Kill phantom horizontal scroll (last-ditch guardrail)
Line:
body { overflow-x: hidden; }Lines 7–8: Text that doesn’t detonate your layout
7) Break long tokens safely (URLs, IDs, emails)
Line:
.prose { overflow-wrap: anywhere; }8) Truncate where you must (the required trio)
Line:
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Line 9: Images that behave inside boxes
9) Make images fill a fixed frame without distortion
Line:
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }'/><circle cx='450' cy='150' r='70' fill='rgba(255,255,255,.35)'/><rect x='60' y='250' width='260' height='26' rx='13' fill='rgba(30,26,48,.22)'/></svg>)
Line 10: Isolate “hot” components
10) Contain layout/paint to reduce blast radius
Line:
.widget { contain: layout paint; }How I apply these without making things worse
- Component scope first: attach the line to the smallest selector that captures the bug.
- Page scope second: if multiple components conflict only on one page, scope it to the page wrapper.
- Global last: only when it’s truly a baseline expectation (like border-box) or you’ve audited impact.
- Keep it one line and local unless you’re setting a baseline.
- Prefer “prevention” rules (
min-width: 0,overflow-wrap) over “hiding” rules (overflow-x: hidden). - Test with worst-case content (long names, translations, and “too many buttons”) at least once at a small breakpoint.