목표

팀 프로젝트에서, flex로 구성된 반응형 페이지의 헤더, 하단 네비게이션 바 사이에 크기가 가변적인 컴포넌트를 추가하고, 사이즈가 커지면 스크롤링 기능이 활성화되어 컨텐츠들을 스크롤링 할 수 있도록 구현하려 했습니다.

문제

scroll 적용이 의도와는 다르게 다른 컴포넌트들을 밀어내거나, 가리거나, 밑에 깔리는, 의도했던 결과와 다른 상황이 발생했습니다.

해결 과정

1: 이러한 문제들을 해결하기위해 제가 이 문제를 담당하였고, overflow, overscroll 등의 여러 정보들을 모아서 테스트해봤지만 별 소용이 없었습니다. 스크롤에 영향받는 일부 요소들을 고정형으로 바꿔봤지만 사용하기 좋은 UI/UX가 되지는 않았습니다.

여러 테스트 중 오직 고정된 값을 사용하는 케이스에서만 문제가 해결되었지만, 목표는 반응형 UI를 만드는것이기 때문에 팀원들에게 중간 상황을 전달하고 좀 더 많은 정보들을 수집했습니다.

2: 그러던 도중 min-height:0, tailWind 코드로는 min-h-0를 쓰면 된다는 정보를 보고 바로 적용했으나, 막상 실행해보니 눈으로 보기엔 별로 달라진게 없었습니다. 여전히 다른 요소들도 스크롤하거나, 밀어내는 현상이 지속되었습니다.

하지만 min-height:0 을 사용하는 답변들의 예제들은 정상적으로 동작하고있었고, 왜 그런지 곰곰히 생각하다가 이전에 고정된 값을 사용하는 케이스들도 정상 동작했던것, auto라는 키워드가 많은 답변들에 있던것을 떠올렸고, 이를 좀 더 알아보기로 하여 답을 찾을 수 있었습니다.

원인

auto 라는 키워드는 자식 요소의 사이즈에 맞춰 나중에 계산되는 디폴트 옵션입니다.

스크롤되는 컨텐츠를 감싼 컴포넌트는 전체 컨텐츠의 사이즈를 가지고 있기 때문에, 최상단 부모부터 auto로 설정되어있으면 자식 컴포넌트의 크기에에 맞춰 부모의 사이즈가 커지고, 이에 맞춰 자식도 커지기 때문에 오작동이 일어나는것이었습니다.

해결방법

flex가 시작되는 컴포넌트의 자식 컴포넌트에다 min-h-0옵션을 넣어서 디폴트값인 auto를 바꾸었습니다.

auto값이 아닌 부모는 자신의 사이즈를 먼저 계산하기때문에 자식 컴포넌트의 사이즈가 커지거나 작아져도 정상적으로 부모의 사이즈를 유지합니다.

후기

중간에 absolute들을 사용하여 반응형을 포기하자는 의견도 있었지만 다행히도 큰 시간 낭비 없이 문제를 해결할 수 있었습니다. 포기하지 않았기에 이런 좋은 경험을 쌓을수 있었다고 생각합니다.