Growing items proportionally

If multiple flex items have a flex-grow value of more than zero, then they will share free space among themselves.

Free space will be added to flex items in proportion to the values of their “greed factor”. For example, if there are two items in a flex container:

.element-1 { flex-grow: 1; }
.element-2 { flex-grow: 2; }

Then the second item will be assigned twice as much free space as the first. If you change the values of the factors for these items to the following:

.element-1 { flex-grow: 50; }
.element-2 { flex-grow: 100; }

Then nothing will change, since factor ratio has not changed: 100 is two times 50. In other words, the value of the factor itself is not as important as its relationship with the factors for the other items.

This is a puzzle assignment for selecting proportions. You need to select the right values for flex-grow so that the total size of the items remain the same as for the bars below. You will recognize the basic sizes of the items and flex container sizes from the code.

Now experiment on your own, and in the next assignment we will analyze the algorithm for calculating the total size of flex items with a non-zero flex-grow value.

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