Currently Empty: ₹0.00
CSS Flex Shrink
CSS CODES & EXAMPLES
CSS Flex Shrink
Learn how the flex-shrink property controls how
flex items reduce their size when the container does not have
enough space.
01
What is Flex Shrink?
Control how flex items shrink
The CSS flex-shrink property specifies how much
a flex item should shrink relative to other flex items when
there is not enough space inside the flex container.
Remember:
flex-shrink becomes important when the combined
sizes of flex items are larger than the available space.
02
Basic Syntax
Define the shrink factor
flex-shrink.css
.item {
flex-shrink: 1;
}
The default value of flex-shrink is
1.
03
flex-shrink: 1
Default shrinking behavior
With flex-shrink: 1, a flex item is allowed to
become smaller when the container has insufficient space.
shrink-one.css
.container {
display: flex;
width: 500px;
}
.item {
flex-shrink: 1;
}Item 1
Item 2
Item 3
04
flex-shrink: 0
Prevent shrinking
Setting flex-shrink: 0 prevents the item from
shrinking because of negative free space.
shrink-zero.css
.item {
flex-shrink: 0;
}Normal Item
flex-shrink: 0
Normal Item
Tip:
Use
flex-shrink: 0 when an element should
maintain its size instead of becoming smaller.
05
flex-shrink: 2
Higher shrink factorA larger shrink factor means the item participates more strongly in distributing negative free space.
shrink-two.css
.item-one {
flex-shrink: 1;
}
.item-two {
flex-shrink: 2;
}Shrink 1
Shrink 2
06
Shrink Ratio
1 : 2 : 3 exampleFlex items can have different shrink factors. These values help determine how negative free space is distributed.
shrink-ratio.css
.item-one {
flex-shrink: 1;
}
.item-two {
flex-shrink: 2;
}
.item-three {
flex-shrink: 3;
}1
2
3
07
Flex Shrink with Flex Basis
Understand the starting size
The amount an item shrinks is also affected by its initial
main size, commonly defined with flex-basis.
basis-shrink.css
.item {
flex-basis: 300px;
flex-shrink: 1;
}Basis: 300px
Grow: 0
Shrink: 1
Grow: 0
Shrink: 1
Basis: 300px
Grow: 0
Shrink: 1
Grow: 0
Shrink: 1
08
flex: Shorthand
Combine grow, shrink and basis
The flex shorthand combines
flex-grow, flex-shrink, and
flex-basis.
flex-shorthand.css
.item {
flex: 0 1 250px;
}
Meaning:
0 = grow,
1 = shrink,
250px = basis.
09
Flex Shrink vs Flex Grow
Understand the difference| Property | Works When | Purpose |
|---|---|---|
flex-grow | Extra space exists | Controls how items grow |
flex-shrink | Space is insufficient | Controls how items shrink |
flex-basis | Before free-space distribution | Defines initial main size |
10
Practical Navigation Example
Prevent important elements from shrinking
navigation.css
.navbar {
display: flex;
gap: 15px;
}
.logo {
flex-shrink: 0;
}
.search {
flex-shrink: 1;
}
.login {
flex-shrink: 0;
}
11
Responsive Card Example
Useful for education websites
A fixed-size image or icon can use
flex-shrink: 0, while the text area can shrink
when the available width becomes smaller.
CSS
CSS Flexbox Course
Learn Flexbox properties and create responsive layouts for modern websites.
12
Important Points
Quick revision
✓
The default value is flex-shrink: 1.
✓
flex-shrink: 0 prevents shrinking.
✓
A larger shrink factor participates more strongly in negative free-space distribution.
✓
The final size also depends on the item’s initial size and other Flexbox constraints.
13
Practice Task
Test your Flexbox knowledge🎯 Build a Responsive Course Card
Create a card containing an image, course information and a button.
- Set the parent to
display: flex; - Set the image to
flex-shrink: 0; - Allow the content section to shrink.
- Keep the button from shrinking.
- Test the card on a small screen.
14
CSS Flex Shrink Live Runner
Run the practical exampleLIVE PREVIEW