Flexbox Align-items center와 overflow scroll이 결합될 때!

  .부모-엘리먼트 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow-y: auto;

    .자식-엘리먼트 {
      // 생략
    }
  }

자식 요소를 부모 요소의 가운데에 위치시키기 위해서 위와 같이 코드를 작성했다고 하자!
위와 같은 코드에서 자식 엘리먼트의 height가 부모 엘리먼트의 height를 초과하면 어떻게 될까?

당연히 스크롤이 생긴다!
그런데 이 때 문제가 발생하는데, 기본적으로 자식 엘리먼트가 부모 엘리먼트 기준 가운데 정렬되어있기 때문에, 브라우저는 부모 엘리먼트 상단으로 튀어나간 자식엘리먼트의 부분은 overflow로 인지하지 않는다. 즉 아무리 위로 스크롤을 해도, 자식 엘리먼트의 최상단까지 올라갈 수 없다는 것이다!

이럴때 활용하는 것이

align-items: safe center;

safe
If the size of the [flex item] overflows the [flex container], the [flex item] is instead aligned as if the alignment mode were [flex-start].

https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container