| description | Use when diagnosing the canonical layout failures of modern CSS : a flex child that overflows its parent (the auto `min-content` floor), three `1fr` grid columns that refuse to be equal (the same floor), a `position: sticky` element that never sticks (ancestor `overflow`, no `inset`, or wrong parent height), a hero section that overshoots the mobile viewport by the chrome bar (`100vh` versus `100dvh / 100svh / 100lvh`), a long URL or unbreakable string that breaks the card layout (`overflow-wrap` / `word-break`), a `z-index` that refuses to win against an element in a different stacking context (`transform`, `opacity < 1`, `filter`, `will-change`, `position: fixed | sticky` all create new contexts), a subgrid track that cannot generate implicit tracks, container query units (`cqi` / `cqb`) falling back to small-viewport units when no container ancestor matches, margin-collapse between parent and first / last child, and the universal `box-sizing: border-box` reset. Prevents the seven dominant layout failure modes : flex items overflowing because the implicit `min-width: auto` is `min-content`; `grid-template-columns: 1fr 1fr 1fr` not splitting evenly because `1fr` is `minmax(auto, 1fr)`; `position: sticky` doing nothing because a scrollable ancestor uses `overflow: hidden | auto | scroll` or because no `inset` value was set; `100vh` extending past the mobile viewport because dynamic browser chrome is excluded; long unbreakable strings expanding the parent past its bounds; `z-index` not winning when the elements live in different stacking contexts; and `box-sizing: content-box` (the default) causing total layout = declared width + padding + border surprises. Covers the `min-width: 0` / `min-height: 0` reset for flex and grid items, `minmax(0, 1fr)` versus `1fr` in grid tracks, intrinsic sizing keywords `min-content` / `max-content` / `fit-content(N)`, the stacking-context creators (`position` non-`static`, `z-index` non-`auto`, `opacity < 1`, `transform`, `filter`, `mix-blend-mode`, `clip-path`, `will-change`, `isolation: isolate`, `contain`), the three margin-collapse cases (sibling-sibling, parent-first-child, parent-last-child) and how to prevent collapse (padding, border, `display: flex / grid`, `overflow: auto`, `display: flow-root`), the dynamic viewport units (`dvh` / `svh` / `lvh` / `dvi` / `svi` / `lvi`), `overflow-wrap: anywhere` versus `word-break: break-word`, the subgrid implicit-tracks limitation (subgrid cannot generate implicit tracks beyond the spanned area on its declared axis), and the canonical universal `box-sizing: border-box` reset. Keywords: layout pitfalls, flex overflow, grid uneven columns, min-width 0, min-height 0, minmax 0 1fr, 1fr not equal, min-content, max-content, fit-content, intrinsic sizing, overflow-wrap, word-break, box-sizing, border-box, content-box, margin collapse, margin collapsing, block formatting context, BFC, display flow-root, position sticky not sticking, sticky overflow hidden, sticky no inset, dvh, svh, lvh, dynamic viewport height, mobile viewport bug, 100vh wrong, z-index, stacking context, subgrid implicit tracks, cqi fallback, container query unit fallback, flex item overflows, grid columns uneven, sticky not sticking, layout broken on mobile, long word breaks layout, z-index not working, viewport 100vh wrong, scrollbar appears, long URL breaks card, items not centering, why is my flex broken, why is my grid uneven, why is my sticky element not sticking, grid 1fr not equal, mobile viewport bug, long URL breaks layout, how to fix layout overflow, why doesn't z-index work.
|
