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

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

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