feat(flex): warn in dev when justifyContent requires an explicit width#39
Merged
Conversation
A flex row container with no explicit width shrinks to fit its children, leaving zero free space. justifyContent values that distribute free space (center, flex-end, space-between, space-around, space-evenly) therefore have nothing to distribute and silently collapse to flex-start — or worse, compute against containerSize 0 since the shrink-to-fit resize only runs in the flex-start branch. Add a dev-only console.warn nudging developers to set an explicit width in these cases. Behavior is unchanged (width still defaults to shrink-to-fit); this is purely a diagnostic, gated by isDev and the existing flexFitsWidth condition so it only fires when the container would actually shrink. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a dev-only
console.warnwhen a flex container uses ajustifyContentvalue that needs free space to distribute (center,flex-end,space-between,space-around,space-evenly) but has no explicitwidthset.Why
A flex row container without a width shrinks to fit its children, leaving zero free space. All five of those justify modes position children from the free space (
containerSize − totalItemSize − padding), so with a shrink-to-fit width they have nothing to distribute and silently collapse toflex-start.It's actually worse than a no-op: when no width is set,
elementNodeseedsprops.w = 0, and the shrink-to-fit container resize only happens in theflex-startbranch offlexLayout.ts. The other justify branches compute againstcontainerSize = 0, producing zero/negative offsets while the container stays width 0. These modes are effectively undefined without an explicit container width that exceeds the content.Approach
This is an alternative to #38. Rather than silently auto-filling the parent width, it keeps the existing shrink-to-fit behavior unchanged and surfaces a diagnostic so the developer sets an explicit
widththemselves.isDev— no warning in production.flexFitsWidthcondition, so it only fires when the container would actually shrink (skipsflexBoundary: 'fixed'and column directions).console.warnso it's clickable to the offending element, matching other warnings in the file.Notes for reviewers
npm run tscpasses clean.🤖 Generated with Claude Code