Calculating the total size with flex-grow

Step 1. Calculate the free space in the flex container:

Free space = Container width - The total of the basic sizes of the items

Step 2. Calculate the size of the minimum share of free space:

The share of free space = Free space / Amount of flex-grow for all items

Step 3. The basic size of each flex item is increased by the size of the minimum share of free space multiplied by the value flex-grow of this item:

Total size = Basic size + (Share of free space * flex-grow)

For the upper block with raccoons, we want to assign the factors 1 and 2. However, the required block sizes are achieved with the factors 1 and 3. Let’s calculate:

Free space = 300px - (50px * 2) = 200px
Share of free space = 200px / (1 + 3) = 50px
Total size of the green raccoon = 50px + (50px * 1) = 100px
Total size of the brown raccoon = 50px + (50px * 3) = 200px

But if you set the basic size of the flex items to zero, the free space will occupy the entire width of the flex container, and the greed factors will be different.

Precision. It is not just flex-basis that affects the size of the remaining free space, but also frames and margins. If flex-basis is explicitly set to zero, then min-width will not affect the size of the free space, since restrictions on the sizes of flex items are applied after the free space is redistributed.