Flexbox와 `text-overflow: ellipsis` 문제 해결 방법

CSS에서 Flexbox 레이아웃을 사용할 때, 텍스트가 요소의 너비를 초과하는 경우 text-overflow: ellipsis;로 말줄임 처리를 하는 경우가 많습니다.

문제의 원인

Flexbox에서 flex: 1;은 다음의 단축 속성을 포함합니다:

flex: 1; /* === flex-grow: 1; flex-shrink: 1; flex-basis: 0; */

문제는 text-overflow: ellipsis;가 제대로 작동하려면 요소의 너비가 고정되어야 말줄임이 가능해집니다. flex: 1;은 요소의 너비를 유연하게 설정하여 너비가 고정되지 않으므로, 말줄임(ellipsis) 처리가 제대로 작동하지 않는다는 것입니다.

해결 방법: min-width: 0; 설정

Flexbox 요소에 min-width: 0;를 추가하면 됩니다.

.container {
  display: flex;
}

.flex-item {
  flex: 1;
  min-width: 0; /* 말줄임 처리를 위해 필수 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• min-width: 0을 설정하여 마치 너비를 설정한 것과 같은 효과를 낼 수 있습니다.