Code has been added to clipboard!

The CSS Flex-Shrink Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 15, 2019

Flex in CSS: shrink to fit

The CSS flex-shrink property lets you specify how much a flex item will shrink if there is not enough space for it to fit in the flex container:

Example
/* Safari 6.1 and above */
a:nth-of-type(1) {
    -webkit-flex-shrink: 2;  	
} 
/* Standard syntax */
a:nth-of-type(1) {
    flex-shrink: 2;
}

This property is a direct opposite of flex-grow. They are often used together, and you can also use the CSS flex shorthand for both of them.

The CSS flex-shrink syntax

flex-shrink only requires specifying one value in a unitless number:

flex-shrink: value;

The default value for CSS flex-shrink is 1, which means the element cannot shrink further than the size required to fit its content. If you define 0 as the value, the flex item will not shrink at all. You cannot use negative values.

Just like flex-grow, CSS flex-shrink divides the space up among flex items according to the ratio defined by the specified values. The difference is that the space is negative in this case, which means the actual flex items shrink in size. If all the items have the same flex-shrink value, they all lose the same portion of size.

Imagine we have three items in the same flex container. See what their flex-shrink values specify:
First item flex-shrink: 1; Loses 1/6 of the space the container lacks to fit all the items
Second item flex-shrink: 3; Loses 3/6 (half) of the free space the container lacks to fit all the items
Third item flex-shrink: 2; Loses 2/6 (a third) of the free space the container lacks to fit all the items

Browser support

Chrome
29+
Edge
12+
Firefox
20+
IE
10+
Opera
12.1+
Safari
9+

Mobile browser support

Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+
Tutorial
CSS3 Features
Syntax
Classes
ID Selectors
Attribute Selectors
Stylesheets
Inline
Internal
External
Box Model
Children Selectors
Pseudo Classes
Pseudo Elements
Variables
Counters
Text
Fonts
Web Fonts
Backgrounds
Background Images
Colors
Gradients
Opacity / Transparency
Shadow Effects
Transitions
Tooltip
Transform
Animations
Layout — Display
Layout — Position
Layout — Float
Layout — Clear
Layout — Horizontal & Vertical Align
Multiple Columns
Introduction
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Responsive Web Design — Videos
Borders
Margin
Padding
Width
Height
Outline
Links
Lists
Tables
Dropdown Menu
Navigation Bar
Images
Image Gallery
Border Images
Forms
Rounded Corners
Buttons
Box-Sizing
Selector Reference
Pagination Examples
Code Examples
CSS3 Browser Support Reference
Functions Reference
Speech Module Reference
Units
Web Safe Font Combinations
Cheat Sheet
:hover
@font-face
@keyframes
@media
align-content
align-items
align-self
all
animation
backface-visibility
background
background-clip
background-color
background-image
background-origin
background-position
background-size
border
border-image
border-radius
border-style
box-shadow
box-sizing
color
columns
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-weight
hanging-punctuation
justify-content
line-height
margin
offset
opacity
order
outline
overflow
padding
perspective
position
resize
tab-size
text-align
text-decoration
text-emphasis
text-transform
text-shadow
transform
transition-property
translate
vertical-align
word-break
word-wrap
z-index