flex-shrink property

The flex-shrink property determines how much a flex block will shrink relative to adjacent elements inside the flex container if there is not enough free space.

For example, if all flex blocks inside a flex container have flex-shrink:1, then they will be the same size. If one of them has flex-shrink:2, then it will be 2 times less than all the others.

It applies to: a specific flex block.

This property is included as an part of the shorthand flex property.

Syntax

selector {
	flex-shrink: positive number;
}

Default value: 1.

Example

Let us have 3 elements. The width of each of them is 200px and a total of 600px, which is greater than the width of the parent container, which is 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

Let's calculate the negative free space using the formula:

600px - 350px = 250px

The total weighted width of the elements, taking into account the values of the flex-shrink property for each element, will be equal to:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Now let’s determine how much the first element will shrink:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

The second element:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

The third element:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

It turns out that the third element, whose flex-shrink value is equal to 3, will shrink more than other elements.

flex-shrink property

Syntax

Example

See also