Interactive online courses HTML Academy
2026-03-09 10:59 Diff
https://htmlacademy.org/courses/layout/flexbox-2/flex-shrink-total-size

The mechanism that is used to calculate the sizes of items when there is not enough space in the container is described as follows:

Step 1 Calculate the negative space (NS) in the flex container:

NS = The container width - Total basic sizes of the items

Step 2. Find the total product of the basic sizes (TPBS) of items and use it as their shrinkage factors.

TBPS = (Basic size1 * flex-shrink1) + (Basic size2 * flex-shrink2) + … + (Basic sizen * flex-shrinkn)

Step 3. For each item we calculate the “normative shrinkage factor” (NSF). To obtain this, we multiply the item base size by its shrinkage factor and then divide by the TBPS:

NSF = (Basic size * flex-shrink) / TBPS

Step 4. Shrink the item basic size by the part of the NS that is proportional to the item NSF. We obtain the NS for the calculation from the module, that is, by discarding the minus:

Total size = Basic size - (NSF * NS)

It turns out that the proportion of negative space that the item “absorbs” depends on two factors:

  • The ratio of the item shrinkage factor to the factors for the other items,
  • The ratio of the item basic size to the basic sizes of the other items.

That is why normalizations are present in the formulas. Now try once again to choose the shrinkage factors.