상자보다 큰 콘텐츠의 표시와 스크롤 방식을 정합니다.
visible은 넘침을 표시하고 hidden은 자르며 auto는 필요할 때 스크롤을 만듭니다. overflow-x와 y를 따로 설정할 수 있고 스크롤 컨테이너는 sticky 기준에도 영향을 줍니다.
이번 예제의 출발점은 overflow: auto;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 auto, hidden, visible을 바꿔 결과를 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
내용을 확인하지 않고 hidden을 쓰면 중요한 버튼이나 텍스트가 잘릴 수 있습니다.
직접 바꿔보세요auto, hidden, visible을 바꿔 결과를 비교하세요.