Sizing Flex Items (grow & shrink)
What are Flex Grow & Shrink?
Imagine three siblings sharing a large sandwich. One sibling is starving and eats twice as fast (Grow factor = 2), while the other two eat at a normal pace (Grow factor = 1). The sandwich gets divided proportionally.In CSS, you can control how individual flex items resize to fill or fit empty spaces:
flex-grow: Defines how much a flex item should expand relative to its siblings to fill up remaining empty space. (e.g., flex-grow: 1 tells an item to grab a proportional share of empty space. An item with flex-grow: 2 will grow twice as much).flex-shrink: Defines how much an item should contract relative to siblings if the container shrinks below the items' baseline widths.Why does it matter?
Fluid sizing allows you to create search bars or form inputs where the text field expands to occupy all remaining width, while the "Submit" button stays a fixed size.Syntax Breakdown
Apply growth values directly to child items:flex-grow: 1; — Item stretches to fill leftover space.flex-shrink: 0; — Item refuses to shrink, staying its original size.Common Mistakes
display: flex;. If the parent isn't a flexbox container, flex-grow will be ignored.Quick Reference
flex-grow — Proportional growth rate factor.flex-shrink — Proportional compression rate factor.flex: 1 — Common shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%;.Your Task
Set the `flex-grow` property of `.stretch-item` to `1` so it stretches to fill the rest of the flex container.
index.html
Type code above to start the lesson.
Live Preview