👿 Problem
header, component, navar가 있을 때 component: flex1을 줘도 내부적으로 딱맞게 늘어나지 않고 내부 컨텐트가 부모 component의 height를 넘어가는 문제 발생
😇 Solution
- 위에 빨간 박스 부분의 사이즈는 고정이므로 전체 100%에서 Header와 Navbar을 뺀 부분을 component의 height로 주기
height: calc(100% - 132px);
- 파란박스 부분을 100% - 위 박스만큼 빼주기
display: flex; flex-direction: column; height: calc(100% - 300px);
- Textarea에 flex: 1을 줘서 자동으로 늘어나도록 함
flex: 1;