스크롤바 때문에 레이아웃이 깨진다?!

1. 문제 상황

• 2줄(2grid)로 보여야 할 상품들이 1줄(1grid)로 보이는 버그가 발생했다.
• 동일한 컴포넌트를 사용중이었고 css 코드 역시 다르지 않았다.
• 심지어 브라우저까지 크롬으로 동일했다.

2. 문제 원인

원인은 바로 os 때문이었다...!

• 맥, 아이폰: 스크롤 바가 화면상의 공간을 차지하지 않는다 -> 실제 콘텐츠가 렌더링 되는 영역에 영향을 주지 않는다.
• 윈도우: 스크롤 바가 화면 상의 실제 공간을 차지한다 -> 콘텐츠가 렌더링 되는 영역아 스크롤 바의 너비만큼 줄어들게 된다.
  예를 들면, 컨테이너의 width가 500px 인 상황에서 스크롤 바가 10px 만큼의 width를 가질 경우, 실제 콘텐츠가 나타나는 영역은 490px 이게 된다. 이로 인해 레이아웃이 조금씩 뒤틀리는 이슈가 발생 할 수 있다.