How Does Padding Affect Flex-Shrink Behavior in `border-box` vs. `content-box`?

Flex-shrink Factor in Padding and Border-Box

The flex-shrink factor is used to determine how much an element will shrink when there is negative space in the flex container. When padding is applied to an element, the inner flex basis is affected, depending on the value of box-sizing.

• Content-box: The inner flex basis includes only the content, so padding does not affect the available space for shrinkage.
• Border-box: The inner flex basis includes both content and padding, so padding reduces the available space for shrinkage.

To calculate the scaled flex shrink factor for each item, multiply its inner flex basis by its flex shrink factor. Then, find the ratio of each item's scaled flex shrink factor to the sum of all scaled flex shrink factors. Finally, set the item's target size to its flex basis minus a fraction of the negative space proportional to the ratio.

With no padding, the calculation is straightforward:

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

With padding, the available space is reduced, so the remaining free space changes.

In the case of border-box, the specified flex bases are the outer bases (including padding). The inner bases are calculated by subtracting padding widths. The sum of the scaled flex shrink factors remains unchanged, but the ratio and target size are adjusted:

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

Example:

Consider a flex container with three items, each with a flex-shrink factor of 2:

• Item 1: Flex basis = 300px, padding = 0px
• Item 2: Flex basis = 200px, padding = 0px
• Item 3: Flex basis = 100px, padding = 0px

Scenario 1 (No Padding):

• Remaining free space = -200px
• Scaled flex shrink factors: 600, 200, 200
• Sum of scaled flex shrink factors = 1000
• Ratios: 0.6, 0.2, 0.2
• Inner widths: 180px, 160px, 60px

Scenario 2 (Padding = 10px):

• Remaining free space = -260px
• Scaled flex shrink factors: 560, 200, 160
• Sum of scaled flex shrink factors = 920
• Ratios: 0.61, 0.22, 0.17
• Inner widths: 144px, 148px, 48px

Scenario 3 (Border-Box):

• Remaining free space = -200px
• Scaled flex shrink factors: 636, 240, 176
• Sum of scaled flex shrink factors = 1052
• Ratios: 0.6, 0.23, 0.17
• Inner widths: 176px, 160px, 64px

The above is the detailed content of How Does Padding Affect Flex-Shrink Behavior in `border-box` vs. `content-box`?. For more information, please follow other related articles on the PHP Chinese website!