width: 100%를 줬는데 가로 스크롤이 생기면 숫자 하나가 거짓말을 한 것이 아니라 상자의 계산 방식을 놓친 경우가 많다. 기본 content-box에서는 지정한 width에 padding과 border가 더해진다.
content-box와 border-box의 계산 차이
도식의 바깥 경계를 비교하면 content-box는 지정한 너비에 padding과 border가 더해지고, border-box는 셋을 지정한 너비 안에서 계산한다. 이 차이를 같은 요소에 적용해 보자.
.panel {
width: 100%;
padding: 24px;
border: 1px solid #23466f;
}기본값인 content-box에서는 내용 영역이 부모 너비 100%이고, 양쪽 padding과 border가 그 바깥에 추가된다. 부모 너비가 320px이라면 위 예제의 전체 너비는 320 + 24 × 2 + 1 × 2 = 370px이다. 같은 선언에 border-box를 적용하면 전체 너비가 320px 안에 들어온다.
*, *::before, *::after {
box-sizing: border-box;
}border-box는 선언한 width 안에 padding과 border를 포함한다. 전역으로 일관되게 적용하면 컴포넌트의 크기를 예측하기 쉬워진다. 다만 이미 content-box 전제를 둔 외부 스타일과 섞일 때는 영향을 확인해야 한다.
브라우저에서 부모를 320px로 고정하고 .panel을 넣은 뒤, 개발자 도구의 계산된 너비를 보자. 기본값이면 370px, border-box를 붙이면 320px이어야 한다. 수치가 다르면 부모의 실제 너비와 패널의 margin·min-width를 함께 확인한다.
overflow는 원인을 숨기는 도구가 아니다
overflow: hidden은 넘친 내용을 잘라 보여 준다. 이미지가 살짝 삐져나온 장식이라면 의도일 수 있지만, 텍스트나 버튼이 잘리는 문제를 가리는 데 쓰면 키보드 사용자와 작은 화면 사용자에게 기능을 감춘다.
코드 블록처럼 가로 폭이 자연스럽게 길어질 수 있는 영역은 overflow-x: auto가 더 적절할 수 있다. 본문 전체에 가로 스크롤을 허용하기보다, 넘침이 필요한 컴포넌트 범위를 작게 한정한다.
개발자 도구로 실제 크기를 본다
문제가 난 요소를 선택해 content·padding·border·margin 값을 확인한다. 자식의 min-width, 긴 공백 없는 문자열, flex 항목의 기본 최소 크기도 자주 원인이다. 부모에 overflow: hidden을 넣기 전에 어느 요소가 몇 픽셀 넘는지 찾으면 수정 범위가 작아진다.
핵심 요약
width는 box model 안에서 해석된다. border-box는 padding과 border를 width 안에 포함해 레이아웃 계산을 단순하게 만든다. overflow는 필요한 콘텐츠 영역에만 의도적으로 쓰고, 가로 스크롤이 생기면 개발자 도구로 실제 상자 크기와 최소 너비부터 확인하자.
