css 나머지 영역 채우기(flex-grow)

css에서 특정 컨텐츠 영역을 제외한 나머지 영역을 채우고 싶을 때 flex-grow를 사용해서 채울 수 있다

<div class="parent">
  <div class="child-1">1</div>
  <div class="child-2">2</div>
  <div class="child-3">3</div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  width: 50vw;
  height: 70vh;
}

.child-1 {
  background-color: #e74c3c;
  height: 100px;
}

.child-2 {
  background-color: #2ecc71;
  height: 100px;
}

.child-3 {
  background-color: #3498db;
  flex-grow: 1;
}

소스코드

• https://github.com/TaehwanGo/playground/commit/7da3f52631e17669dd21453bb1f1cedfeb4ffb0e

참고

• https://developer-ping9.tistory.com/147