ความโลภเมื่อกำหนดความกว้างให้กับบล็อก flex ใน CSS

สมมติว่าเรามีบล็อก flex หลายบล็อก ลองกำหนดค่า flex-grow เป็น 1 ให้กับหนึ่งในบล็อกเหล่านี้ และกำหนดความกว้างบางค่าให้กับองค์ประกอบอื่นๆ ทั้งหมด ผลลัพธ์ที่ได้คือ บล็อกทั้งหมดจะมีความกว้างคงที่ และบล็อกที่โลภของเราจะครอบครอง พื้นที่ที่เหลือทั้งหมดที่ใช้ได้:

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

.parent {
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}

.elem1 {
	width: 100px;
}
.elem2 {
	flex-grow: 1;
}
.elem3 {
	width: 100px;
}

เอฟเฟกต์ลักษณะนี้จะเห็นได้ชัดเป็นพิเศษเมื่อ ความกว้างของ parent เป็นเปอร์เซ็นต์ ในกรณีนี้ เมื่อความกว้างของ parent เปลี่ยนไป บล็อกที่โลภของเรา จะมีความกว้างที่ลอยตัว ในขณะที่ บล็อกอื่นๆ ทั้งหมดจะมีความกว้างคงที่: