Tailwind CSS
/Intermediate
Flex Grow & Shrink
Definition
Utilities for controlling how flex items grow and shrink relative to each other inside a flex container.
Explain Like I'm New
Imagine 3 people sharing a pie. - `flex-none`: I will eat exactly 1 slice, no more, no less. - `flex-1`: I will stretch to eat whatever pie is left over. - `shrink-0`: If we run out of pie, do NOT reduce the size of my slice. Steal from the others.
Real World Example
An input field next to a Search button. You give the Search button `flex-none` so it stays its normal size, and you give the input field `flex-1` so it stretches out to fill the entire rest of the search bar.
Common Use Cases
- •Search bars
- •Sidebar layouts
- •Preventing images from squishing
Interactive Example
Interview Questions
basic
- What class forces an element to fill all available remaining space in a flex container?
intermediate
- Why would you apply `shrink-0` to a profile picture in a flex row?