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 nested scroll containers (scroll inside scroll)
Adding overflow to a parent that already has a scrolling child creates a confusing double scrollbar; scope scrolling to the one region that needs it.
Bad example
| 1 | .host { overflow-y: auto; } /* and the inner <ul> already scrolls -> scroll inside scroll */ |
Explanation (EN)
Competing scroll owners can produce two scrollbars and confusing wheel/keyboard behavior.
Objašnjenje (HR)
Good example
| 1 | .host { display: flex; flex-direction: column; max-height: 80vh; } |
| 2 | .header { flex: 0 0 auto; } |
| 3 | .list { flex: 1; min-height: 0; overflow-y: auto; } |
Explanation (EN)
The constrained panel gives its shrinkable list the scrolling responsibility while the header remains outside it.
Objašnjenje (HR)
Notes (EN)
For a panel intended to have one scrolling region, inspect constrained heights, flex/grid min sizes and overflow on every ancestor before choosing the scroll owner.
Exceptions / Tradeoffs (EN)
Nested scrolling can be intentional for a document with an independent editor/table. Removing overflow can change clipping or sticky positioning.