문제 상황

옆 자리 개발자 분이 사이드 바와 정보를 담는 컨텐츠를 구축하고 있었다.
상위 컴포넌트 안에 하위 컴포넌트로 사이드 바와 컨텐츠 컴포넌트가 있었다.

<div>
  <SideBar style={{width: '280px'}}/>
  <Contents />
</div>

사이드 바의 width 값이 280px이고 컨텐츠는 그 나머지를 차지하고 싶다고 하셨다.
그래서 컨텐츠의 width 값을 100% 로도 해보고 100vw 로도 하셨는데 안된다고 하셔서 도움을 드리고자 개발에 참여했다.

해결 방법

찾아본 결과 CSS에 flex 라는 것이 있었다.

<div>
  <SideBar style={{width: '280px'}}/>
  <Contents style={{flex: 1}}/>
</div>

flex 라는 것을 1로 하니 Contents 의 영역이 나머지 영역으로 할당됐다.
그렇담 flex 라는 것은 무엇일까???
알아보자!!