Adjusting Flexbox Compression in CSS

By default, all elements are shrunk in proportion to the element's width. However, you can make some elements shrunk in larger or smaller pieces. There is a special property for this, flex-shrink.

This property is a certain weight by which the width of the element will be multiplied when calculating the piece to be pinched off using the formula given above. For example, if the width of an element is 200px, and its flex-shrink is 3, then the weighted (i.e. multiplied by the weight) width of the element will be:

200px * 3 = 600px

The formula taking into account flex-shrink will look like this: neg. sv. space * (weighted element width / sum of all weighted widths of elements).

Let's look at an example. Let's say we have 4 elements. Let's say the width of the first element is 400px and their flex-shrink is 2, the width of the remaining elements is 200px and their flex-shrink is 1. Let's say the width of the parent is 900px.

The total width of the elements is:

400px + 3 * 200px = 1000px

The negative free space will be:

1000px - 900px = 100px

The total weighted width of the elements is:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

The weighted width of the first element is:

400px * 2 = 800px

The following piece will be pinched off from the first element:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

The width of the element will be equal to:

400px - 57.14px = 342.86px ~ 343px

The weighted width of each of the remaining elements is:

200px * 1 = 200px

The following piece will be pinched off from each element:

400px - 57.14px = 342.86px ~ 343px

The width of the element will be equal to:

200px - 14.2px = 185.8px ~ 186px

Implement the described blocks and check by measurement that the width of the elements will actually be equal to the one we calculated.

Calculate the width of the blocks and then check your calculations by measuring:

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

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

Calculate the width of the blocks and then check your calculations by measuring:

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

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

Calculate the width of the blocks and then check your calculations by measuring:

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

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