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

Sum of basic-size × shrink-factor products = (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:

• Shrinking reduces an item’s content-box size. Its padding and borders do not shrink along with the content box.
• Minimum and maximum sizes constrain flexible sizing. If an item reaches a limit, space can be redistributed among the other items.

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