Διαφορετικό πλάτος στοιχείων και συμπιεστότητα των flex μπλοκ στο 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;
}