CSS flex-shrink Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Interactive Demo

Flex Shrink
Item 2
Item 3

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: 1st January 2024