Using flex shorthand property, write a code that defines the following behavior:
If there is free space, the first product should get 1/7 from it, the second one should get 4/7, and the last one should get the remaining 2/7. But if the size of the catalog is too small to fit all the products, they should be reduced with the values of the relevant CSS property 1, 2, and 2, respectively. The initial size of each product should be set to 6em.
When you complete all the tasks, don't rush to press the 'send' button. Use this task as a sandbox: try to change the flex-basis value and observe how the output will change. But don't forget to send the solution once you're done experimenting.
Tip: As we already know, the distribution of the free space is defined by flex-grow or flex-shrink properties. If there is free space you should apply flex-grow to each element considering the sum of values should be equal to 7. If there is no free space and the items are overflowing, you should do the same but will flex-shrink and amount of values equal to 5.