CSS - 모달 내 특정 div 영역에만 scroll 적용하기

 

 

 

모달 안의 리스트에만 부분적으로 scroll 을 적용하려고 한다.

대충 감잡고 overflow 속성을 이용하면 되겠다 싶었는데 정확히 어떤식으로 적용해야 되는지 기억이 안났다.

그래서 잊어버릴까봐 기록해본다 :)

(다음에는 overflow 속성에 대해 자세히 공부해보아야겠다!)

 

 

 

부모에 block 속성을 넣어주고, 스크롤 되야하는 영역에는 overflow & height 를 넣어주면 되겠다.

 

<div className="modal"> 		// display: block;
    <div className="modal-header">
        새발자 테스트 모달
    </div>
    
    <div className="modal-content">    // height: 50vh; overflow-y: auto;  
       ...list items
    </div>
    
    <div className="modal-footer">
    	<button>닫기</button>
    </div>
</div>