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
10	12	29	20	12.1	9
Tablets / Mobile
4.4	29	20	12.1	9	2.0

Last updated by CSSPortal on: 4th November 2019