Flex 안에서 말줄임(text-ellipsis)처리가 안되는 경우

프론트엔드 개발을 하다 보면 Flex를 사용하여 레이아웃을 구성하는 경우가 많다.

특히 리스트나 테이블 형태의 UI에서 왼쪽에는 텍스트를, 오른쪽에는 날짜를 배치하는 등의 디자인은 매우 흔하게 사용된다.

이때 텍스트가 너무 길어질 경우 말줄임 처리를 해줘야 하는데, Flex 레이아웃 안에서 단순하게 말줄임 속성만 적용하면 텍스트가 부모 컨테이너를 벗어나버리는 문제가 종종 발생한다.

왜 이런 현상이 발생하는 걸까?

이 문제가 발생하는 이유는 Flex 아이템의 기본 동작 방식 때문이다.

For flex items and grid items, the minimum width value is either the specified suggested size, such as the value of the width property, the transferred size, calculated if the element has an aspect-ratio set and the height is a definite size, otherwise, the min-content size is used. If the flex or grid item is a scroll container, or if a grid item spans more than one flexible column track, the automatic minimum size is 0.

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/min-width

flex 아이템과 grid 아이템의 경우, 최소 너비 값은 지정된 크기가 있으면 그 크기로 설정되고 그렇지 않으면 min-content 크기가 사용된다는 내용이다.

그래서 만약 1줄 말줄임 처리를 할 경우, white-space: nowrap이 설정되어 있으면 전체 텍스트의 길이가 min-content가 되기 때문에 부모 박스를 벗어나는 현상이 생기게 된다.

요약하자면

1. Flex 아이템의 기본 min-width 값은 auto
2. min-width: auto일 경우, Flex 아이템은 자신의 콘텐츠가 줄어드는 것을 방지하려고 한다.
3. 따라서 텍스트가 길어지면 부모 컨테이너의 크기를 무시하고 콘텐츠 크기만큼 늘어나버린다.

이 문제를 해결하기 위한 방법은 min-width: 0 이다.

.left-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
 
.date {
  flex-shrink: 0;
}

min-width: 0 을 사용하여 Flex 아이템이 필요한 경우 콘텐츠 크기보다 더 작아질 수 있게 해준다.

이렇게 하면 Flex 아이템 안에서 말줄임을 문제없이 처리할 수 있다.