Flex Grow Space Distribution Calculator
Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.
Description
Flex grow distributes positive free space among participating items according to their grow factors.
Flex grow distributes positive free space among participating items according to their grow factors. Factors whose sum is below one intentionally request only a fraction of the space instead of filling it all.1, 2
Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.
When to use Flex Grow Space Distribution Calculator
Use this tool to distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use Flex Grow Space Distribution Calculator and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter freeSpace, growFactors using the field table and calculation rules, then run the tool.
- Read allocations, unallocatedSpace. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| freeSpace | Positive free space | number; minimum: 0 | Required |
| growFactors | Flex grow factors | list of number; minimum: 0; minimum entries: 0; maximum entries: 1000 | Required |
Enter nonnegative free space and a list of nonnegative grow factors. The tool scales factors by their maximum before summing and distributes the requested fraction proportionally. If all factors are zero, or the list is empty, no allocation is made and all space remains unallocated. Returned allocations align with the input items.
allocation_i = freeSpace × factor_i / max(1, Σfactors); unallocated = freeSpace × (1 − min(1, Σfactors)) Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| allocations | Space added to each item | list of number; minimum: 0 |
| unallocatedSpace | Unallocated space | number; minimum: 0 |
{
"input": {
"freeSpace": 120,
"growFactors": [
1,
2
]
},
"output": {
"allocations": [
40,
80
],
"unallocatedSpace": 0
}
}Limitations and assumptions
This assumes the items are unfrozen and does not apply min/max sizes, base sizes, wrapping or further redistribution. It returns added space rather than final item widths. All values must use a consistent main-axis unit and the factor list is limited to 1,000 entries.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Flex Shrink Deficit Proportional Loss: Compute initial flex shrink losses with partial filling before min-size freezing, using factors multiplied by base sizes. For a complementary task, use Grid repeat() Count From Gap & Width: Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.
Further background: CSS Flexible Box Layout: resolving flexible lengths.
References
Similar or alternative tools
- Flex Shrink Deficit Proportional Loss
Compute initial flex shrink losses with partial filling before min-size freezing, using factors multiplied by base sizes.
- Grid repeat() Count From Gap & Width
Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.