flex-shrink and min-width

In order to solve the previous assignment, the factors must be 1 and 1.

Let’s calculate the sizes of the items from the previous assignment and make sure that the described algorithm is correct.

Negative space = 200px - 100px - 300px = -200px

The total product of the factor sizes = (1 * 100px) + (1 * 300px) = 400px

Normalized factor for item 1 = (1 * 100px) / 400px = 0.25
Normalized factor for item 2 = (1 * 300px) / 400px = 0.75

Total size of item 1 = 100px - (200px * 0.25) = 50px
Total size of item 2 = 300px - (200px * 0.75) = 150px

There are several subtleties regarding how flex items can be shrunk:

• The items are shrunk to fit within the bounds of their basic sizes, and the inner margins and frames are not shrunk.
• “Restrictive” properties, such as min-width, are applied to items only after the stage when free space or negative space is redistributed.

And these subtleties can lead to unexpected effects if the items overflow outside of the flex container. Let’s experiment.