[CSS] 감싸는 div는 고정하고 부분적으로 내부스크롤 만들기

CSS이긴 한데, 현재 사용하는게 tailwind고 어떤 div에 어떤 css가 들어갔는지 확인이 한번에 되기 때문에 tailwind 기준으로 작성하도록 하겠다.

 

1. 맨 상위 컨테이너는 너비 높이를 설정한다.

 

2. 자식 컨테이너에 grow, overflow-hidden을 적용한다.

 

3. 그 컨테이너의 안에 overflow-y-auto를 넣어 스크롤이 생성되게 해준다.

 

이렇게 하면 grow를 해도 전체가 커지는게 아닌 그 안쪽에서 컨텐츠 너비에 맞춰 내용은 늘어나고, 스크롤이 생긴다.

 

<div className="w-10/12 h-full">
	<div className="grow overflow-hidden">
		<div className="w-full h-full overflow-y-auto">{내용}</div>
	</div>
</div>