CSS flex로 세로 나머지 모두 채우기

두개의 div 중에 하나는 나머지는 남은 공간을 채우고 싶을때 flex를 사용한다.

<style>

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  background-color: #ff0000;
}

.inner-con {
  flex: 1;
  background-color: #00ff00;
}

</style>

<div class="container">
  <div>header</div>
  <div class="inner-con"> 공간채움</div>
</div>