CSS에서 한 요소를 width나 height의 나머지 공간을 채우려면 어떻게 할지 찾아봤습니다. flex-grow라는 녀석이 있더군요. 예를 들어, 주로 홈페이지를 만들때 상단에 navigation bar가 있고 중앙에 main 컨텐츠가 들어가고 하단에 footer로 꾸미고싶다고 가정합시다. 아래와 같이 세 요소의 비중이 동일할때 main으로 나머지(검은부분)을 꽉 채우고 싶어요! 이럴때는 채우고 싶은 요소 즉, 아래에서는 main선택자에 'flex-grow:1'이라는 값을 줘서 나머지를 꽉! 채울 수 있습니다! See the Pen Untitled by Hebom (@hebom2022) on CodePen.
