Shrinking items proportionally

The flex-shrink property is very similar to the flex-grow property. It is used to assign the proportions by which flex items “absorb” negative space.

The greater the value of the shrinkage factor for this item, the more negative space it will absorb and the more the item will be shrunk.

When the basic sizes of flex items are the same, the shrinkage proportions for elements are considered to be the same as the growth proportions. If the basic sizes of flex items differ, then use of this mechanism can be complicated. We will explore it in more detail in the next assignment.

In the meantime, experiment again with the factors in the puzzle assignment.

You need to select the right values for flex-shrink so that the total sizes of the items match the ones for the brown and green bars and nothing appears above the red bar.

The red bar is used to display the negative space size that is distributed when shrinking the flex items.

You will recognize the basic sizes of the items and flex container sizes from the code.

Hint: to achieve the simplest solution, you need factors that are integers of no more than 5.