Flex Shrink Deficit Proportional Loss
Compute initial flex shrink losses with partial filling before min-size freezing, using factors multiplied by base sizes.
Description
Flex shrink initially distributes a space deficit using each item's shrink factor multiplied by its base size.
Flex shrink initially distributes a space deficit using each item's shrink factor multiplied by its base size. When the unscaled shrink factors sum below one, only that fraction of the deficit is requested before size constraints are considered.1, 2
Compute initial flex shrink losses with partial filling before min-size freezing, using factors multiplied by base sizes.
When to use Flex Shrink Deficit Proportional Loss
Use this tool to compute initial flex shrink losses with partial filling before min-size freezing, using factors multiplied by base sizes.
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 Shrink Deficit Proportional Loss 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 deficit, baseSizes, shrinkFactors using the field table and calculation rules, then run the tool.
- Read losses, undistributedDeficit. 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 |
|---|---|---|---|
| deficit | Space deficit | number; minimum: 0 | Required |
| baseSizes | Flex base sizes | list of number; minimum: 0; minimum entries: 1; maximum entries: 1000 | Required |
| shrinkFactors | Flex shrink factors | list of number; minimum: 0; minimum entries: 1; maximum entries: 1000 | Required |
Enter a nonnegative deficit and aligned nonempty lists of nonnegative base sizes and shrink factors. The tool forms scaled shrink weights, using logarithms if multiplication overflows or underflows, and allocates the requested fraction proportionally. If all weights are zero, every loss is zero and the whole deficit is undistributed. Otherwise undistributedDeficit is the unrequested fraction of the supplied deficit.
weight_i = baseSize_i × shrinkFactor_i; loss_i = deficit × min(1, ΣshrinkFactors) × weight_i/Σweights Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| losses | Initial proportional losses | list of number; minimum: 0 |
| undistributedDeficit | Undistributed deficit | number; minimum: 0 |
{
"input": {
"deficit": 60,
"baseSizes": [
100,
200
],
"shrinkFactors": [
1,
1
]
},
"output": {
"losses": [
20,
40
],
"undistributedDeficit": 0
}
}Limitations and assumptions
This is the initial unfrozen allocation, not the complete flex layout algorithm. It does not clamp sizes at zero/minimums, freeze items or redistribute after constraints; a loss can exceed a base size. Base sizes and deficit must use matching units, and each list has at most 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 Grow Space Distribution Calculator: Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one. 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 Grow Space Distribution Calculator
Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.
- 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.