230906 css flexbox에서 부모 영역 전체 공간 사용하기

230906 css flexbox에서 부모 영역 전체 공간 사용하기

flexbox에서 자식이 2개 이상일때 부모의 크기에서 다른 자식의 크기를 뺀 나머지 크기를 모두 사용하도록 하는 방법

 

아래와 같이 헤더 영역, 컨텐츠 영역, 바텀 영역이 있을때 

높이가 달라질 때 헤더와 바텀 영역의 크기는 고정하고 컨텐츠 영역의 크기만 변경된다.

.content { flex: 1 }