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

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