Using flex-shrink and flex-grow to make flexbox children resize correctly

[00:00] To figure out what happens when we have a surplus or a deficit of space, we need to understand flex-grow and flex-shrink. To make flex-grow and shrink easier to see, I'm going to give each of these children a different flex-basis. I'll set the first to 120, the second to 40 pixels, and the third to 100 pixels.

[00:30] Now look, I have extra space in the flexbox not being used by the children. The flex-grow property dictates how that space should be divvied up by the children. Flex-grow defaults to zero, which means none of these children will grow beyond their flex-basis. If I set the flex-grow of the first child to one, it will use up all the extra space without affecting the width of the other children.

[00:50] This one does not have a unit. It is a proportion. It is a one to zero, in this case 100 percent. It is using 100 percent of the extra space. If I changed the flex-grow on the second child to two, now the first child is getting one third of the extra space, and the second child is getting two thirds.

[01:07] If I set the flex-grow of the third child to three, now the first child gets one sixth of the extra space, the second child gets two sixths or one third, and the third child gets three sixths or one half of the extra space.

[01:19] If instead of divvying up the extra space I want to divvy up the total space, I could set the flex-basis on all the children to zero, which would make the total space the same as the extra space since none of the children are taking up any space. Flex-grow dictates how the extra space beyond the combined flex-basis should be divided up.

[01:37] Flex-shrink defines what should happen when there's a deficit in the combined flex-basis values, meaning if the combined flex-basis is greater than the allowed space, how did these elements shrink? For an example, I'm going to define all the flex-basis values to be 200 pixels, so the combined width will exceed the width of the container.

[01:54] Even though they are too big, they're all losing some width because the default width of flex-shrink is set to one, meaning all children shrink the same amount from their flex-basis values. If I set the flex-shrink of one of the children to two, it will shrink twice as much as the other children.

[02:09] I can set it to 10 or even 100, but notice at some point it does not go past the width of the content itself if the other children have non-content width they can spare. The emphasis here is content should never be clipped for the benefit of empty space.

[02:22] If I don't want a child to shrink it all, I can set the flex-shrink to zero. In fact, if I set the flex-shrink to zero on all of them, they will cause the container width to overflow.