Interactive online courses HTML Academy
2026-03-09 14:07 Diff
https://htmlacademy.org/courses/layout/flexbox-2/flex-shrink-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.