CSS flex-shrink Property

Description

The flex-shrink CSS property is used in conjunction with flexbox layouts to control how a flex container's items shrink when there isn't enough space in the container. It defines the ability of an item to shrink relative to other items in the same flex container. A higher flex-shrink value means the item will shrink more when space is limited, while a lower value means it will shrink less. By default, all flex items have a flex-shrink value of 1, which means they will share the available space equally. However, by adjusting this property, you can fine-tune the resizing behavior of individual items within a flex container to create responsive and flexible layouts.

Initial value
1
Applies to
Flex items, including in-flow pseudo-elements
Inherited
No
Computed value
As specified
Animatable
Yes
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

The following table will show you the current browser support for the CSS flex-shrink property.

Desktop
Edge Chrome Firefox Opera Safari
12292012.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
292012.1924.4

Last updated by CSSPortal on: 23rd September 2023