CSS: 화면 절반만 스크롤바 가능하게 만들기 overflow-y:auto 이용하기

내가 구현하고 싶었던 화면은 화면의 상단에서 중앙까지는 지도가 나오고
화면의 중앙부터 하단까지는 진료부서 및 편의시설 리스트의 버튼들로 구성되는 화면을 원했다.

화면의 상단~중앙은 class를 map-container로 두고
화면의 중앙~하단은 class를 department-buttons로 두고
아래 CSS 코드를 사용하면 첨부한 사진의 결과가 나온다!

html, body {
  height: 100%;
  overflow: hidden;
}

.map-container {
  height: calc(100vh - 50%);
  overflow-y: auto;
}

.department-buttons {
  height: 35%;
  overflow-y: auto;
}

피부과 버튼을 눌렀을 때

영상의학과 버튼을 눌렀을 때

---