"Child-combinator universal selector (`.parent > *`) never matches in s&box SCSS"
▸ SYMPTOM
Flex-shrink or spacing protections written as .scroll > * { flex-shrink: 0 } have no effect. Once content exceeds the container's max-height, the engine's flex layout squashes the children that should have been protected, and a section-header element paints directly over the row below it (overlapping text). Both dotnet build and the in-editor compile_status stay green — no error, no warning.
▸ CAUSE
The s&box SCSS parser silently drops rules that target the universal selector through a child combinator (.parent > *, including the sibling form > * + *). The rule compiles clean and simply never applies at runtime. There is no console warning or toast — the only tell is a live layout diff.
This is the same silent-parser family as the undefined-SCSS-variable trap and the border-style: dashed / radial-gradient(... at ...) traps: the sheet compiles without complaint and the rule is quietly ignored.
▸ FIX
Skip the universal child combinator entirely. Write direct descendant rules naming each child class explicitly:
.scroll .row,
.scroll .divider,
.scroll .group {
flex-shrink: 0;
}This is the nested-class pattern every shipped sheet already uses. Every direct child that needs the protection gets its own selector line.
▸ WHY IT WORKS
Named-class selectors go through a different code path in the s&box SCSS compiler and are matched reliably. The * universal selector in a child-combinator context is the specific construct that fails to register — replacing it with explicit class names sidesteps the parser gap entirely. There is no performance difference in practice; the selector list is typically short (the children of a given container are a known, finite set).
- Published