How Does Flex-Shrink Factor Interact with Padding in Border-Box Sizing?

How does flex-shrink factor in padding and border-box?

Flexbox calculation for shrink factor, as outlined in the spec, requires multiplying the shrink factor of each item by its flex base size, resulting in a scaled shrink factor. These scaled factors are then used to determine the proportion of negative free space that should be applied to each item.

Content-Box vs Border-Box

When padding is introduced, the flex base size depends on the value of box-sizing. In the case of content-box, the padding is added to the outer width, preserving the inner size that is used as the flex base size. As a result, the shrinkage calculation remains the same as the scenario without padding.

However, when box-sizing is set to border-box, the specified flex base sizes become the outer widths, including the padding. The inner flex base sizes are calculated by subtracting the border and padding widths. This change in the inner flex base size affects the calculation of scaled shrink factors and ultimately the shrinkage behavior of flex items.

Shrinkage Calculation with Border-Box

Consider a situation with padding and box-sizing set to border-box:

• Outer flex base sizes: [360px, 220px, 120px]
• Inner flex base sizes: [320px, 200px, 100px]
• Padding: 20px on each side
• Negative free space: -200px

Calculating the scaled shrink factors:

• item1: (320px 2) / [(320px 2) (200px 1) (100px 2)] = 0.64
• item2: (200px 1) / [(320px 2) (200px 1) (100px 2)] = 0.24
• item3: (100px 2) / [(320px 2) (200px 1) (100px 2)] = 0.12

Finally, applying the scaled shrink factors to the negative free space:

• item1: 0.64 * (-200px) = -128px
• item2: 0.24 * (-200px) = -48px
• item3: 0.12 * (-200px) = -24px

Adjusted Inner and Outer Sizes

Adjusting the computed sizes to account for the outer flex base sizes:

• item1: Inner: 320px - 128px = 192px; Outer: 192px 2*20px = 232px
• item2: Inner: 200px - 48px = 152px; Outer: 152px 2*20px = 192px
• item3: Inner: 100px - 24px = 76px; Outer: 76px 2*20px = 116px

This demonstrates how the shrinkage is distributed based on the flex shrink factor and the consideration of border-box sizing. The padding is added back to the outer width, resulting in different computed sizes compared to the content-box scenario.

The above is the detailed content of How Does Flex-Shrink Factor Interact with Padding in Border-Box Sizing?. For more information, please follow other related articles on the PHP Chinese website!