Case library
Reproduced responsive layout failures
Browse implemented cases by visible symptom or underlying sizing mechanism.
Search 15 implemented cases
Filtering happens locally in your browser.
15 cases available.
Why `100vw` Can Create Horizontal Scrolling
A viewport-wide child ignores the inline space already consumed by its padded page container and makes the document wider than the visible area.
Why Flex Items Refuse to Shrink: `min-width: auto`
A flex item keeps a content-based automatic minimum size and forces a row wider than a narrow viewport even when shrinking is enabled.
`1fr` vs `minmax(0, 1fr)`: Prevent Grid Overflow
A flexible grid track keeps an automatic minimum based on long content and expands beyond the available inline size.
Fix Long URLs and Unbroken Text Without Hiding Overflow
A continuous identifier has no normal wrapping opportunity, so its line box extends beyond a narrow article and widens the page.
Keep Code Blocks Scrollable Without Widening the Page
A preformatted command preserves one long line and lets its overflow escape into the document instead of remaining inside the code region.
Stop Fixed-Size Images From Breaking Mobile Layouts
A 640-pixel image keeps its authored width inside a narrower article, forcing the document wider even though its intrinsic aspect ratio is valid.
Make Fixed-Size Iframes Fit Narrow Containers
A 640 by 360 iframe preserves its authored desktop dimensions inside a narrower article, producing page-level overflow instead of scaling as a bounded 16:9 region.
Keep Wide Tables Scrollable Without Breaking Page Reflow
A semantic comparison table needs two-dimensional space, but allowing its 640-pixel width to escape the article makes unrelated text scroll horizontally too.
Prevent Sticky Headers From Hiding Anchor Targets
A sticky 56-pixel header covers a focused jump target after scroll positioning, so keyboard users cannot see the control or its focus indicator.
Stop Fixed Bottom Banners From Covering Focused Content
A persistent 72-pixel bottom banner covers the final focused action after end-aligned scrolling, leaving the control and its focus indicator unavailable to keyboard users.
Choose Viewport Height Units Without Hiding Mobile Content
A full-height shell sized to a larger viewport can extend 56 pixels below the currently visible area when browser controls occupy part of the screen.
Prevent Image Layout Shifts With Width and Height
A project-owned image receives its source after initial layout; without dimensions the following content moves when the image becomes available, while width and height reserve its aspect ratio in advance.
Measure and Reduce Layout Shift From Web Font Substitution
A deterministic system-font model isolates the geometry change caused by swapping fonts with different metrics, then compares it with making the final face available before the first measured layout.
Reserve Stable Space for Ads and Third-Party Embeds
A project-authored delayed panel shows how inserting unknown content into a zero-height slot moves the article below it, while an initial minimum height preserves layout.
Add a Cookie Banner Without Shifting or Obscuring Content
A project-authored consent notice compares unreserved insertion with a stable region, then verifies that keyboard dismissal removes the notice and returns focus to the prior control.
Implemented categories
Browse by mechanism
Horizontal scrolling, long content, media, and data that cross an intended boundary.
Flexbox & Grid2 implementedIntrinsic sizing, flexible tracks, and items that refuse to shrink.
Mobile Viewports & Overlays3 implementedDynamic viewport height, sticky headers, and fixed content overlap.
Layout Shift4 implementedImages, fonts, ads, and late content that move an already rendered page.