Flexbox Sizing: flex-grow, flex-shrink and flex-basis

Each flex item starts from its flex-basis, flex-grow shares out the leftover space like splitting a bill, flex-shrink decides who gives up room when it's tight, flex: 1 sets all three at once, and min-width: 0 lets a long line of text shrink.

Updated

Cheat sheet: Flexbox Sizing: flex-grow, flex-shrink and flex-basis
Category
CSS
Level
Journeyman
Tags
CSS, Flex basis, Flex grow, Flex shorthand, Flex shrink, Minimum size