Flex Grow
The flex-grow property in CSS determines how much a flex item will grow relative to the rest of the flex items inside a flex container.
This property only works with Flexbox, not with CSS Grid.
Flex Grow in Workmaster
In Workmaster, the Flex Grow property controls how a widget expands to fill available space within a flex container.
To use Flex Grow on child elements, the parent container must have its Display set to Flex.
This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.
Possible Values
0 (default)
The widget will not grow to fill available space.
1 or higher
The widget will grow in proportion to the rest of the flex items with a grow value.
For example, if one widget has Flex Grow: 0 and another has Flex Grow: 1, the first will occupy twice as much extra space as the second.
Examples
Initial Layout with Three Widgets
Consider a Flex Container with three child widgets placed side by side.
1. Flex Grow: 0 (Default)
Widget A:
Flex Grow: 0Widget B:
Flex Grow: 0Widget C:
Flex Grow: 0
All widgets maintain their original width. Extra space is left empty.
2. Flex Grow: 1
Widget A:
Flex Grow: 1Widget B:
Flex Grow: 1Widget C:
Flex Grow: 1
Each widget grows equally to fill the available space in the container.
3. Mixed Flex Grow Values
Widget A:
Flex Grow: 2Widget B:
Flex Grow: 1Widget C:
Flex Grow: 1
Widget A grows to take twice the space compared to Widgets B and C.
Last updated