CSS tries to avoid "data loss"

오버플로가 있을 때 CSS의 기본 동작을 보여주는 두 가지 예제를 보자.

첫 번재 예제는 height 를 제한해서 생기는 경우다.

<div class="box">This box has a height and a width. This means that if there is too much content </div>

<p>This content is outside of the box.</p>

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
}

두 번째 예제는 박스가 단어 하나를 제대로 못 담을 만큼 작을 때 생기는 경우다.

<div class="word">Overflow</div>

.word {
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}

그렇다면 왜 CSS는 오버플로시 지저분하게 보여주는 것일까?
넘치는 contents를 숨기거나 박스의 크기를 contents에 맞게 조정하는게 낫지 않을까?

CSS는 contents를 숨기지 않는다.
데이터가 손실될 수 있기 때문이다.
또한 데이터가 손실되었단 걸 사용자가 눈치채지 못할 수 있다.
예를 들어, 버튼이 오버플로가 되어 숨겨진다면 웹 페이지가 정상적으로 동작할 수 없을 것이다.
따라서 CSS는 눈에 보이는 방식으로 오버플로가 된다.
그로인해 사용자는 웹 페이지가 문제가 있다는것을 눈치챌 수 있다.

만약 개발자가 width 와 height 를 제한한다면 CSS는 개발자가 오버플로의 가능성을 생각하며 무언가를 하고 있다고 생각한다.
오버플로의 가능성을 생각하지 못한채 width 와 height 를 제한하면 버그가 발생활 확룰이 높아진다.

일반적으로 박스에 텍스트가 포함되어 있으면 블록 차원 ( 물리적 속성으로 heigth ) 을 제한하는 것이 문제가 된다.
사이트를 설계할 때 예상보다 많은 텍스트가 있거나 사용자가 글꼴 크기를 늘려서 텍스트 크기가 더 클 수도 있다.

The overflow property

overflow 프로퍼티는 오버플로를 제어하는 속성이다.
overflow 는 overflow-x 와 overflow-y 의 shorthand 버전이다.
두 개의 값이면 순서대로 overflow-x 와 overflow-y 가 적용되고
하나의 값이면 둘 다 적용된다.

사용 가능한 값으로는 다음과 같다.

• visible : 기본값이다.
  오버플로 영역이 잘리지 않고 박스 외부에 표시된다.

• hidden : contents가 오버플로될 때 잘린다.
  스크롤바가 생기지 않고 마우스 스크롤 기능도 허용되지 않는다.
  하지만 자바스크립트의 scrollLeft 나 scrollTo() 와 같이 프로그래밍으로는 스크롤 될 수 있다.
  즉, 박스가 스크롤 컨테이너가 아닌것은 아니다라는 의미이다.

• clip : hidden 과 유사한데 차이점으로는 clip 키워드는 프로그래밍 방식 스크롤을 포함한 모든 스크롤을 금지한다는 것이다.
  이 박스는 스크롤 컨테이너가 아니며 새 block formatting context를 만들지 않는다.
  새 block formatting context를 만들고 싶다면 display:flow-root 를 적용하면 된다.

• scroll : contents가 오버플로될 때 잘린다.
  하지만 잘리든 안잘리든 상관없이 항상 스크롤 막대가 표시된다.
  프린터 하면 넘치는 내용을 인쇄할 수 있다.

  x축 y축으로 둘 다 스크롤 막대가 생긴다.
  y축에만 스크롤 막대를 추가하고 싶다면 overflow-y: scroll 로 설정하면 된다.
  긴 단어를 표시하고 싶을때 overflow-x: scroll 로 설정하면 x축 스크롤 막대가 생기지만
  추천하는 방식은 아니다.
  작은 상자에 긴 단어가 있으면 word-break 또는 overflow-wrap 프로퍼티를 사용하는 것이 좋다.

• auto : user-agent에 따라 달라진다.
  내용이 상자안에 들어맞으면 visible과 같이 보이지만 새로운 block formatting context를 생성한다.
  데스크탑 브라우저일 경우 오버플로시 스크롤 막대가 생긴다.

Overflow establishes a Block Formatting Context

overflow 프로퍼티의 값으로 visible 또는 clip 이외의 값을 사용하면 BFC ( Block Formatting Context ) 가 생성된다.

BFC는 블록 박스의 레이아웃이 발생하고 float가 다른 요소와 상호 작용하는 영역이다.
오버플로 값을 변경한 상자의 content는 self-contained layout를 가져온다.
오버플로를 적용한 박스 외부의 content는 박스안으로 들어갈 수 없으며, 그 어떤 것도 박스안에서 주변 레이아웃으로 들어갈 수 없다.
이렇게 하면 스크롤되는 박스의 content가 외부 박스의 content와 겹치지 않으면서도 포함됨으로써 스크롤 동작이 가능해진다.

Unwanted overflow in web design

최신 레이아웃 방법은 오버플로를 관리한다.
대체로 웹 페이지에 얼마나 많은 content가 있을 것인지에 관심이나 의존없이 동작한다.

과거에는 박스의 바닥을 정렬하기 위해 고정된 높이의 컨테이너로 만들고 했지만, 이 방법은 깨지기 쉬웠다.
오버플로가 발생하여 내용이 페이지의 다른 내용을 덮어쓰는 박스가 나타날 수 있었다.
따라서 고정 높이 컨테이너에 의존하지 않도록 레이아웃을 리팩터링하는 것이 이상적이다.

사이트를 개발할 때는 항상 오버플로를 염두에 둬야 한다.
적거나 많은 content로 설계를 테스트 하고, 텍스트의 글꼴 크기를 늘려서 CSS가 어떻게 작동하는지 확인해보자.

[참고] : MDN