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
Interactive Demo
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 29 | 20 | 12.1 | 9 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
29 | 20 | 12.1 | 9 | 2 | 4.4 |
Last updated by CSSPortal on: 1st January 2024