Flex Shrink

Utilities for controlling how flex items shrink when there is not enough space.

Allow items to shrink

Use shrink (the default) to allow a flex item to shrink if needed.

Style('flex ...', children: [
  Style('h-14 w-14 flex-none ...', child: Text('01')),
  Style('h-14 w-64 shrink ...', child: Text('02')),
  Style('h-14 w-14 flex-none ...', child: Text('03')),
])

Prevent items from shrinking

Use shrink-0 to prevent a flex item from contracting. Surrounding flex-1 siblings absorb the remaining space, while the shrink-0 tile keeps its declared width even when the container is narrow.

Style('flex ...', children: [
  Style('flex-1 ...', child: Text('01')),
  Style('w-16 shrink-0 ...', child: Text('02')),
  Style('flex-1 ...', child: Text('03')),
])

Class reference

Class	Description
shrink	Allow a flex item to shrink if needed (flex-shrink: 1). This is the default.
shrink-<number>	Set the flex shrink factor to <number>. Examples: shrink-2, shrink-3.
shrink-0	Prevent a flex item from shrinking (flex-shrink: 0).
shrink-[<value>]	Arbitrary shrink factor — a non-negative integer, e.g. shrink-[2].

Flutter’s flex layout has no proportional-shrink concept — all shrink-eligible siblings compress equally regardless of shrink-<number> magnitude. The integer is parsed and stored on StyleSpec.flexShrink for parity, but the visual outcome is the same as plain shrink.

The CSS-variable form shrink-(--custom-property) is resolved against theme-defined StyleThemeData.customProperties — it behaves like shrink-[<value>] when the theme defines the property. Cascade-inherited or JS-set CSS variables remain out of scope.