overflow 넘침 처리

개념 이해하기

visible은 넘침을 표시하고 hidden은 자르며 auto는 필요할 때 스크롤을 만듭니다. overflow-x와 y를 따로 설정할 수 있고 스크롤 컨테이너는 sticky 기준에도 영향을 줍니다.

대상 요소 뒤에 ::after가 긴 문장을 덧붙여 내용이 늘어나지만, 상자는 height: 90px로 고정돼 있고 border-box라서 글이 쓸 수 있는 높이는 padding을 뺀 66px뿐입니다. 늘어난 글이 그 높이를 넘으면 overflow: auto가 상자 안에 스크롤 영역을 만들어 나머지를 스크롤해서 읽게 합니다. .second는 display: none이라 이 실습에서는 아예 그려지지 않습니다.

한 축만 hidden으로 자르고 다른 축은 visible로 두는 조합은 만들 수 없어서, overflow-x: hidden을 주면 overflow-y의 visible은 auto로 계산됩니다. 스크롤 컨테이너를 만들지 않고 넘친 부분을 잘라내기만 하려면 overflow: clip을 씁니다.