CSS flex-shrink Property

Description

The flex-shrink property sets the compression ratio of flexes in the container and sets how much the element will decrease in relation to other flexes in order to place all the elements on one line.

Initial value
1
Applies to
Flex items, including in-flow pseudo-elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.flexShrink

Syntax

flex-shrink: <number>

Values

  • <number>Integers (1, 2, 3, ...) or fractional numbers (for example: 0.6) are accepted. Negative values ​​are ignored.

Example

<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:red;">A</div>
<div class="box" style="background:lightblue;">B</div>
<div class="box" style="background:yellow;">C</div>
<div class="box1" style="background:brown;">D</div>
<div class="box1" style="background:lightgreen;">E</div>
</div>
#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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012292012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292012.19?