CSS 100VW 스크롤바

100vw

css로 컨테이너의 가로 너비를 100vw로 설정해도 하단의 스크롤바가 생기면서 스크롤바 만큼 배경색상이 적용되지 않는 문제가 발생하였다.

검색을 해보니 아래와 같은 솔루션을 찾게 되었다.
https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one

첫 번째 솔루션은 동작하지 않았다. 추천을 더 많이 받았지만 머티리얼ui의 makeStyles를 쓰고있어서 그런게 아닐까 생각되었다.

두 번째 솔루션을 제대로 동작하였다. body에 overflow-x: hidden;

body: {
  overflow-x: hidden;
}

을 추가해주니 잘 동작했다.

스크롤바가 vw에 포함되므로 가로 스크롤이 추가되어 세로 스크롤 아래를 볼 수 있습니다. 상자가 1 개뿐이면 너비 100 % x 높이 100 %입니다. 2를 더하면 100 % 너비 x 200 % 높이이므로 수직 스크롤바가 트리거됩니다. 수직 스크롤바가 트리거되면 수평 스크롤바가 트리거됩니다.

설명을 읽어보니 납득되었다.