flex-shrink

Summary

The CSS flex-shrink property specifies the flex shrink factor of a flex item.

Initial value 1
Applies to flex items, including in-flow pseudo-elements
Inherited no
Media visual
Computed value as specified
Animatable yes, as 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

Formal syntax: <number>

flex-shrink: 2

flex-shrink: inherit

Values

<number>: See <number>. Negative values are invalid.

Examples

element { 
  flex-shrink: 3;
}

Specifications

Specification	Status	Comment
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification.	Candidate Recommendation

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0) (behind a pref) [1] 20.0 (20.0) [2]	21.0-webkit	Not supported [3]	12.10	Not supported

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	18.0 (18.0) (behind a pref) [1] 20.0 (20.0) [2]	?	Not supported	12.10	Not supported

[1] Firefox supports only single-line flexbox until Firefox 28. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0.

[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.