# 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.

![Cheat sheet: Flexbox Sizing: flex-grow, flex-shrink and flex-basis](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/3f32c452dcc54ab4b66d48d12ecb5f75.webp)

- Category: CSS
- Level: Journeyman
- Tags: CSS, Flex basis, Flex grow, Flex shorthand, Flex shrink, Minimum size
- Updated: November 1, 2026

Source: https://www.ask-codey.com/cheat-sheets/css-flexbox-sizing-cheat-sheet