How Does Flexbox's `flex-shrink` Factor Account for Padding and `box-sizing`?

Flex-shrink with Padding and Border-box

Flexbox's shrink factor formula considers padding and box-sizing as follows:

Step 1: Calculate Inner Flex Base Size

Determine the size of the content box (innerFlexBasis) based on the box-sizing property.

• If box-sizing: content-box, innerFlexBasis = specified flex basis.
• If box-sizing: border-box, innerFlexBasis = specified flex basis - (padding-left padding-right).

Step 2: Calculate Scaled Flex Shrink Factor

Multiply the inner flex basis by the flex shrink factor for each unfrozen item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

Step 3: Determine Ratio of Scaled Flex Shrink Factors

Sum the scaled flex shrink factors of all unfrozen items: sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

Find the ratio of each scaled flex shrink factor to the sum: ratio = scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

Step 4: Calculate Item Inner Width

Modify the inner width of each item proportionally to the ratio and remaining free space:

innerWidth = innerFlexBasis ratio * remainingFreeSpace

Step 5: Adjust Outer Width

For box-sizing: border-box, add padding to the inner width to calculate the outer width (computed by getComputedStyle).

The above is the detailed content of How Does Flexbox's `flex-shrink` Factor Account for Padding and `box-sizing`?. For more information, please follow other related articles on the PHP Chinese website!