Skip to content

feat(flex): warn in dev when justifyContent requires an explicit width#39

Merged
chiefcll merged 1 commit into
mainfrom
warn-justify-content-width
Jun 29, 2026
Merged

feat(flex): warn in dev when justifyContent requires an explicit width#39
chiefcll merged 1 commit into
mainfrom
warn-justify-content-width

Conversation

@chiefcll

Copy link
Copy Markdown
Contributor

What

Adds a dev-only console.warn when a flex container uses a justifyContent value that needs free space to distribute (center, flex-end, space-between, space-around, space-evenly) but has no explicit width set.

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 to flex-start.

It's actually worse than a no-op: when no width is set, elementNode seeds props.w = 0, and the shrink-to-fit container resize only happens in the flex-start branch of flexLayout.ts. The other justify branches compute against containerSize = 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 width themselves.

  • Gated by isDev — no warning in production.
  • Guarded by the existing flexFitsWidth condition, so it only fires when the container would actually shrink (skips flexBoundary: 'fixed' and column directions).
  • Passes the node to console.warn so it's clickable to the offending element, matching other warnings in the file.

Notes for reviewers

  • Behavior is unchanged; this is purely a dev diagnostic.
  • npm run tsc passes clean.

🤖 Generated with Claude Code

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>
@chiefcll chiefcll merged commit 3583f61 into main Jun 29, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant