Flex-grow and flex-basis

One reason why Flexbox is flexible is that Flexbox items can grow and shrink in size.

By default, each Flex item is displayed based on their min-width property.

Once one Flex item receives a positive flex-grow value, this item takes all the available space in the container.

If all the Flex-items receive the same positive flex-grow value, they divide all the available space among them equally.

We can adjust the proportions with respect to each other by assigning different positive flex-grow values to each Flex item. For instance, if the first item has a flex-grow value of 1 and the second item has a flex-grow value of 3, the second item grows three times as fast as the first value.

Example: