CSS에서 다른 너비 요소와 플렉스 블록의 수축성

이제 우리의 요소들이 다른 너비를 가지고 있다고 가정해 봅시다. 이 경우, 잘려나갈 부분은 해당 요소의 너비에 비례하며, 다음 공식으로 계산됩니다: 음의 자유 공간 * (요소 너비 / 모든 요소 너비의 합).

4개의 요소가 있다고 가정합니다. 첫 번째 요소의 너비는 400px이고, 나머지 요소들의 너비는 200px이며, 부모 요소의 너비는 900px입니다.

요소들의 총 너비는 다음과 같습니다:

400px + 3 * 200px = 1000px

그러면 음의 자유 공간은 다음과 같을 것입니다:

1000px - 900px = 100px

첫 번째 요소에서 얼마나 잘려나갈지 계산해 봅시다:

100px * (400px / 1000px) = 40px

즉, 그 너비는 다음과 같을 것입니다:

400px - 40px = 360px

나머지 각 요소에서 얼마나 잘려나갈지 계산해 봅시다:

100px * (200px / 1000px) = 20px

즉, 이 요소들의 너비는 다음과 같을 것입니다:

200px - 20px = 180px

설명된 블록들을 구현하고 측정을 통해 요소들의 너비가 실제로 우리가 계산한 것과 일치하는지 확인하십시오.

블록들의 너비를 계산한 다음, 측정을 통해 계산을 확인하십시오:

<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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}