CSS flex-shrink Property


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
Applies to
Flex items, including in-flow pseudo-elements
Computed value
As specified
JavaScript syntax

Interactive Demo

Flex Shrink
Item 2
Item 3


flex-shrink: <number>


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


<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>
#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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024