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

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

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

css.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 เปลี่ยนไป บล็อกที่โลภของเรา จะมีความกว้างที่ลอยตัว ในขณะที่ บล็อกอื่นๆ ทั้งหมดจะมีความกว้างคงที่: