Flex Shrink
The flex-shrink property in CSS determines how a flex item shrinks relative to the rest of the items in a flex container when there isn't enough space.
This property works only with Flexbox, not with CSS Grid.
Flex Shrink in Workmaster
In Workmaster, the Flex Shrink property controls how a widget contracts when the parent Flex Container has less space than required.
To enable Flex Shrink, the parent container must have its Display set toFlex.
Possible Values
0 (default)
The widget will not shrink, even if there isn’t enough space.
1 or higher
The widget will shrink proportionally with other flex items based on their shrink values.
Examples
Initial Layout with Three Widgets
Consider a Flex Container with three widgets that exceed the total available width of the container.
1. Flex Shrink: 0
Widget A:
Flex Shrink: 0Widget B:
Flex Shrink: 0Widget C:
Flex Shrink: 0
All widgets retain their original width, causing overflow outside the container if necessary.
2. Flex Shrink: 1
Widget A:
Flex Shrink: 1Widget B:
Flex Shrink: 1Widget C:
Flex Shrink: 1
Widgets shrink equally to fit inside the container without overflowing.
3. Mixed Flex Shrink Values
Widget A:
Flex Shrink: 2Widget B:
Flex Shrink: 1Widget C:
Flex Shrink: 1
Widget A shrinks twice as much as Widgets B and C, minimizing its width more significantly.
Last updated