Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Avoid 100vw for full-width; prefer container query units
Avoid viewport-width sizing when the element should fill a container; use normal layout or container units with a deliberately established containment context.
Bad example
| 1 | .feature { width: 100vw; } |
Explanation (EN)
Viewport width can exceed the available layout width when a scrollbar occupies space.
Objašnjenje (HR)
Good example
| 1 | .feature { width: 100%; box-sizing: border-box; } |
Explanation (EN)
The component fills its containing block without adding global size containment.
Objašnjenje (HR)
Notes (EN)
For an element that should fill its containing block, prefer normal block sizing or width:100%; use container units only when the design actually depends on an established query container.
Exceptions / Tradeoffs (EN)
100vw can be intentional for viewport-wide content. Adding container-type changes containment/layout and is not a harmless global overflow fix; test scrollbars, writing mode and supported browsers.