CSS에서 flex 블록의 지정된 너비와 탐욕성

여러 개의 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;
}

Результат:

특징적인 효과는 부모의 너비가 백분율(%)로 지정되었을 때 특히 두드러집니다. 이 경우 부모의 너비가 변경되면 우리의 탐욕적인 블록은 유동적인 너비를 가지게 되고, 다른 모든 블록은 고정 너비를 유지합니다: