overflow: auto와 display: flex가 적용된 박스에 padding을 적용하면 오른쪽은 여백이 생기지 않는 버그를 사파리에서 발견했다. 컨텐츠에서 오른쪽으로 margin을 줘도 여백이 생기지 않는다. 하지만 전체 박스 크기에는 패딩이 영향을 미치고 있기 때문에 완전히 무시되는 것은 아니다. 스크롤 되는 영역에서만 여백이 생기지 않는 문제이다.

어떻게 할지 고민하다가 검색해 보니 비슷한 경우를 발견했는데 padding을 사용하지 않고 :before와 :after를 사용해서 마치 플로트를 클리어 시켜주듯이 가상 요소를 추가하는 식으로 해결하고 있다. 상세한 부분은 좀 다르지만 같은 방법을 적용해 보니 문제가 발생하지 않는다.

정확한 재현 상황은 기억이 나지 않는데 파이어폭스에서 플렉스 박스가 아니어도 가끔 여백이 생기지 않는 경우를 겪었던 적이 있는데 그런 경우에도 동일한 방법으로 해결을 할 수 있을 것 같다.