justify-content: center와 overflow: scroll을 함께 사용하니 스크롤이 처음부터 되지 않고 잘리는 문제가 발생했다.
이는 기본적으로 자식 엘리먼트가 부모 엘리먼트 기준 가운데 정렬되어있기 때문에, 브라우저는 부모 엘리먼트 상단으로 튀어나간 자식엘리먼트의 부분은 overflow로 인지하지 않는다. 그래서 아무리 왼쪽으로 스크롤을 해도, 자식 엘리먼트의 끝부분까지 스크롤이 되지 않았다.
이럴 때 safe 키워드를 사용하면 flex-start처럼 가장 처음부터 정상적으로 스크롤이 되도록 할 수 있다.
justify-content: safe center;
그런데 크로스 브라우징을 고려할 필요가 있을 듯하다.
https://caniuse.com/?search=flex%20safe
결국, 크로스 브라우징 때문에 margin으로 정렬하도록 변경했다.
