Skip to content

💡 flex-shrink and flex-basis #80

Description

@natemoo-re

Is your feature request related to a problem?

When children overflow their parent along the main axis, we can't absorb the overflow by shrinking sized children. The solver only redistributes free space across grow children and excludes fixed/percent from compression, so an overflowing row keeps every child at its declared size and pushes trailing children off-grid. A width-10 row with two fixed(6) children plus a trailing fit() lays A at width 6, B at 6, and C at x=12—off the 10-wide grid—so C never renders, giving "A B " instead of all three glyphs.

Describe the solution you'd like

A child should support a flex-basis as the solver's starting main size plus a shrink weight controlling how much overflow it absorbs. shrinkWeight (exact name TBD) should mirror the CSS flex-shrink property and default to 0, preserving today's no-shrink behavior; basis mirrors CSS flex-basis and seeds the main size before the solver runs. For the scene above, marking both width-6 children shrinkable by 1 distributes the 3-column overflow (6→5, 6→4), landing C at x=9 and rendering "A B C".

open("a", {
  layout: {
    width: {
      ...fixed(6),
      basis: 6,
      shrinkWeight: 1,
    },
    height: fixed(1),
  },
});

Describe alternatives you've considered

A JS-side workaround means measuring intrinsic sizes, computing the negative-free-space split, and re-emitting each child as a fixed() of the shrunk width before render. That duplicates the solver in the bindings, can't see wrapped-text or nested intrinsic sizes the way Clay does, and breaks the moment a parent resizes.

Additional context

Failing test case on nm/repro/flex-shrink (test · diff). Today A and B stay at width 6 and C lands at x=12. Likely spans the Clay solver and the wire format: clay/clay.h:2318 skips FIXED/PERCENT from resizableContainerBuffer, clay/clay.h:2358-2401 runs the sizeToDistribute < 0 loop with no per-child shrink weight, src/clayterm.c:365 decode_axis has no basis/shrink word, and ops.ts:16 packAxis plus the ops.ts:216 SizingAxis union would need a basis/shrink-aware shape.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions