CSS overflow 부분 스크롤 안되는 문제

Next.js 로 토이프로젝트를 진행하는 도중에, 창을 줄였을때 나머지 부분이 스크롤 되지 않고 다 잘려나가는 문제가 발생했다.

- globals.css

@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
*{
  box-sizing: border-box;
}
html,
body{
  position: fixed;
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Unbounded', cursive;
  overflow: scroll;
}

@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
*{
  box-sizing: border-box;
}
html,
body{
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: 'Unbounded', cursive;
  overflow: scroll;
}

간단히 body 에 fixed 를 지워주니 해결되었다. fixed 를 사용하면 그 자리에서 움직이지 않는다는 뜻이기 때문에, 계속 브라우저 상에서 고정되니 위같은 사진의 문제가 발생했던 것이었다.

스크롤이 적용되어서 잘 나온다.