W3cubDocs

/CSS

flex-shrink

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of flex items is larger than the flex container, items shrink to fit according to flex-shrink.

Syntax

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

The flex-shrink property is specified as a single <number>.

Values

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

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 29
29
21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
20
20
Since Firefox 28, multi-line flexbox is supported.
Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
10
10
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.
12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
8
Prefixed
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 4.4
4.4
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
29
29
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Yes
Yes
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
20
20
Since Firefox 28, multi-line flexbox is supported.
Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
? ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink