How Does `box-sizing` Affect Flexbox Shrink Factor Calculations with Padding?

Flexbox Shrink Factor with Padding and Border-Box

Flexbox dynamically adjusts the size of items within a container based on available space. The flex-shrink property controls how an item shrinks when the container is too small to accommodate all its contents.

When padding is applied to flex items, the outer width includes both the padding and content, while the inner width only encompasses the content itself. The box-sizing property determines which width is used in flex calculations.

Without Padding

The formula for calculating scaled flex shrink factors (inner flex base size multiplied by flex shrink factor) remains the same:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

With a total negative free space of -200px, the shrink factors and resulting inner widths are:

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

With Padding

When padding is added, the available space for content decreases, leading to different inner widths.

Without Border-box

The shrink factors are calculated based on the inner flex base size, which does not include padding. The resulting inner widths are:

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

With a negative free space of -260px, the shrink factors and inner widths become:

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

With Border-box

When box-sizing: border-box is applied, the flex base size includes both content and padding. The shrink factors are calculated using the outer flex base size, which is the specified flex property multiplied by the available space.

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

With a negative free space of -200px, the shrink factors and inner widths are:

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

The above is the detailed content of How Does `box-sizing` Affect Flexbox Shrink Factor Calculations with Padding?. For more information, please follow other related articles on the PHP Chinese website!