Growing and Shrinking
The flex container's grow and shrink properties allow a great deal of control over how different components expand and shrink. To demonstrate, here are three components nested inside a flex container, with a direction of row:

All three components have the same basis, so at this session width, they all have the same size. However, the blue component has a much larger grow value than the other two components. So, when we increase the length of the flex container along its direction property:

The blue component does most of the stretching. Specifically, since the sum of all grow properties is 1 + 1 + 5 = 7, and the blue component has a grow property of 5, for every 7 pixels the flex container grows, the blue component will grow by 5. Now let's try shrinking the container, noting that the red component has a shrink value of 5:

As you can see, a larger shrink value will make the container shrink more. For every 7 pixels the flex container loses, the red component will lose 5.
Static Widths
Now let's try the same example again, but with some different grow and shrink values:

We've given the red and green components identical values, so they should stretch and shrink at the same rate. Meanwhile, the blue component's grow and shrink values are both 0, so when we make the flex container wider, it stays the same size:

Even Scaling
Now let's say we start off with a blue component twice the basis of the others:

In order to maintain this ratio as the width of the container increases, it must have a grow value twice that of the others:
