HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
🏄‍♂️
[팀8] 어푸(Ah puh) - Surf/
🔫
Trouble shooting/
flex: 1 안먹는 문제

flex: 1 안먹는 문제

WHO
STATUS
solved
WHEN

👿 Problem

header, component, navar가 있을 때 component: flex1을 줘도 내부적으로 딱맞게 늘어나지 않고 내부 컨텐트가 부모 component의 height를 넘어가는 문제 발생

😇 Solution

notion image
  • 위에 빨간 박스 부분의 사이즈는 고정이므로 전체 100%에서 Header와 Navbar을 뺀 부분을 component의 height로 주기
notion image
  • 파란박스 부분을 100% - 위 박스만큼 빼주기
  • Textarea에 flex: 1을 줘서 자동으로 늘어나도록 함
 

🧐 Reference

 
height: calc(100% - 132px);
display: flex;
flex-direction: column;
height: calc(100% - 300px);
flex: 1;