CSS Flexbox Compressibility Factor

In the previous lesson we learned that when flex items run out of space, they start to shrink. The amount by which the total width is greater than the parent's width is called negative free space.

Technically, squashing means that a chunk of width is pinched off from the width of each element so that all elements fit within their parent.

Let's do some calculations. Let's say we have 4 elements with a width of 200px. Let's say the width of the parent is 700px. It turns out that the total width of the elements is:

200px * 4 = 800px

This width is 100px greater than the parent's width. Let's calculate how much we need to pinch off from each element so that the elements fit into their parent:

100px / 4 = 25px

That is, the width of the elements will be:

200px - 25px = 175px

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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}