The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.
flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
<div class="grid">
<div class="row">
<div class="cell">flex-shrink:
<div class="container">
<div class="item small"><strong>0.5</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div>
<div class="item mid"><strong>1</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div>
<div class="item large"><strong>3</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div>
</div>
</div>
</div>
</div>
html,body {
height: 100%;
box-sizing: border-box;
background: #EEE;
}
.grid {
width: 100%;
height: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
.cell {
margin: .5em;
padding: .5em;
background-color: #FFF;
overflow: hidden;
text-align: left;
flex: 1;
}
.note {
background: #fff3d4;
padding: 1em;
margin: .5em;
font: .8em sans-serif;
text-align: left;
flex: 1;
white-space: nowrap;
}
.container {
background: #E4F0F5;
margin-top: .5em;
display: flex;
}
.item {
border: 1px solid black;
padding: 1em;
}
.small { flex-shrink: 0.5; }
.mid { flex-shrink: 1; }
.large { flex-shrink: 3; }
| Initial value | 1 |
|---|---|
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | a number |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Using CSS flexible boxes for more properties and information.
Syntax
The flex-shrink property is specified as a single <number>.
Values
Formal syntax
<number>
Example
HTML
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p> <p>The width of D and E is less than the others.</p> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div>
CSS
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 18.0 (18.0)[1] 32.0 (32.0)[2] |
21.0-webkit | (Yes)-webkit (Yes) |
10[3] | 12.10 | 8.0-webkit |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 18.0 (18.0)[1] 32.0 (32.0)[2] |
? | (Yes)-webkit (Yes) |
No support | 12.10 | No support |
[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.
In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.
[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0(Spec, Demo).
[3] Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.