Zachłanność przy określonej szerokości bloków flex w CSS

Załóżmy, że mamy kilka bloków flex. Jednemu z tych bloków ustawmy flex-grow na wartość 1, a wszystkim pozostałym elementom - pewną szerokość. W rezultacie okaże się, że wszystkie bloki będą miały stałą szerokość, a nasz wybrany blok zachłanny będzie zajmował całą pozostałą dostępną przestrzeń:

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;
}

Результат:

Charakterystyczny efekt jest szczególnie widoczny, gdy szerokość rodzica jest podana w procentach. W tym przypadku przy zmianie szerokości rodzica nasz zachłanny blok będzie miał płynną szerokość, a wszystkie pozostałe - stałą: