말줄임표를 넣어도 flex 카드 밖으로 파일명이 밀려나는 이유

긴 파일명에 overflow: hidden, white-space: nowrap, text-overflow: ellipsis를 넣었는데도 카드 밖으로 글자가 이어진다. 파일명을 감싼 요소가 flex item이라면 그 요소의 min-width: auto가 축소를 막는지 먼저 확인한다. 이번 재현에서는 파일명을 감싼 .content에 min-width: 0을 추가하자 남은 폭 안으로 줄어들고 말줄임표가 나타났다.

글자를 생략하는 요소와 줄어들어야 할 flex item은 서로 다를 수 있다. 이 차이를 보기 위해 합성 파일명이 든 정적 HTML을 만들었다. 실제 서비스에서 발생한 장애 기록은 아니다.

말줄임표가 있는 요소의 바깥이 넓었다

아래 내용을 빈 HTML 파일에 저장하고 브라우저로 열면 같은 구조를 확인할 수 있다. 별도 서버나 라이브러리는 필요 없다. 카드의 직접 자식은 아이콘과 .content이고, 파일명이 있는 .title은 .content 안의 일반 블록이다.

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { margin: 24px; font: 14px/1.5 Arial, sans-serif; }
  .card {
    display: flex; gap: 12px; width: 320px;
    padding: 12px; border: 1px solid; box-sizing: border-box;
  }
  .icon { flex: 0 0 40px; }
  .content { flex: 1 1 0%; }
  .title {
    margin: 0; font: 16px/1.5 monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .meta { margin: 0; }
</style>
<div class="card" id="auto">
  <div class="icon">CSV</div>
  <div class="content">
    <p class="title">archive_20261021_customer_export_0123456789abcdef0123456789abcdef0123456789abcdef.csv</p>
    <p class="meta">합성 파일명 · 실제 파일 없음</p>
  </div>
</div>

.content에는 이미 flex-shrink: 1에 해당하는 설정이 있다. 그래도 최소 크기보다 작아질 수는 없다. Flexbox 명세의 자동 최소 크기 절↗ (새 탭에서 열림)은 주축 방향에서 flex item의 overflow 계산값이 비스크롤 값일 때 내용에 기반한 자동 최소 크기를 사용한다고 설명한다. 여기서는 가로 방향 flex이고 .content의 overflow-x는 기본값인 visible이다. 한 줄로 유지하는 긴 파일명이 그 최소 크기에 영향을 준다.

안쪽 .title에 있는 overflow: hidden은 바깥 .content의 설정을 바꾸지 않는다. MDN의 text-overflow 설명↗ (새 탭에서 열림)에서도 이 속성 자체가 넘침을 만들지는 않는다고 설명한다. 파일명 상자가 글자 전체를 담을 만큼 넓다면, 그 상자 안에서는 생략할 부분이 없다.

같은 파일명과 CSS를 가진 카드를 두 개 두고, 한쪽의 .content에만 다음 선언을 추가했다.

.content { min-width: 0; }

카드와 파일명에서 반대 방향의 변화가 나왔다

Windows 11의 headless Chromium 147.0.7727.15에서 1280×720과 390×844 뷰포트로 실행했다. 두 크기 모두 아래 값이 나왔다. 단위는 CSS px이며, 각 쌍은 clientWidth / scrollWidth다.

• 기본 auto: 카드 318 / 744, .content 680 / 680, 파일명 680 / 680.
• min-width: 0: 카드 318 / 318, .content 242 / 242, 파일명 242 / 680.

clientWidth는 테두리를 제외한 내부 폭이다. scrollWidth는 가려진 내용을 포함한 가로 영역의 폭을 나타낸다. clientWidth 정의↗ (새 탭에서 열림)와 scrollWidth 정의↗ (새 탭에서 열림)에 따라, 테두리를 포함한 320px 카드의 내부 폭은 318px로 읽힌다.

기본 상태의 화면에서는 파일명과 옅은 배경이 카드 테두리 오른쪽으로 길게 나갔다. 파일명 자체는 680 / 680이므로 자기 상자 안에서 넘치지 않았다. 반면 min-width: 0 상태에서는 파일명이 카드 안에서 archive_20261021_customer_ex…처럼 생략됐다. 파일명 상자는 242px로 줄고, 전체 글자가 차지하는 가로 영역은 680px로 남았다.

따라서 수정 후 파일명의 scrollWidth > clientWidth는 정상적인 생략 상태와 함께 나타날 수 있다. 이 값의 차이를 없애려고 하면 말줄임표에 필요한 넘침까지 없애게 된다. 이번 수정에서는 카드의 넘침은 없어지고 파일명 상자 안의 넘침이 생겼다. 수치와 함께 화면에서 말줄임표도 확인했다.

카드 외곽 폭은 두 상태 모두 320px였다. 카드 자체가 커진 것처럼 보여도 실제로는 내부 요소가 밖으로 나갈 수 있다. 여기서 .content가 쓸 수 있는 폭은 320 - 테두리 2 - 패딩 24 - 아이콘 40 - 간격 12 = 242px다. min-width: 0은 요소를 0px로 만드는 선언이 아니라, 이 폭까지 줄어들 수 있도록 최소 너비 제한을 푸는 선언이다.

.title에만 min-width: 0을 넣은 비교에서는 .content가 여전히 680px였다. 바꿔야 할 곳은 카드의 직접 자식인 .content였다. 파일명을 짧은 report.csv로 바꾼 비교에서는 기본 auto 상태에서도 카드와 파일명이 넘치지 않았다. 짧은 이름만 넣어 보면 문제가 드러나지 않는 이유다.

내 카드에서는 두 요소의 크기를 함께 읽는다

위 HTML을 연 페이지의 개발자 도구 Console에서 다음을 실행한다. 자기 페이지라면 첫 선택자를 실제 flex item으로 바꾸고, .title도 파일명이 있는 요소에 맞춘다.

(() => {
  const item = document.querySelector('#auto .content');
  const name = item.querySelector('.title');
  return {
    minWidth: getComputedStyle(item).minWidth,
    itemWidth: item.getBoundingClientRect().width,
    nameClient: name.clientWidth,
    nameScroll: name.scrollWidth
  };
})()

이번 실행에서는 처음에 {minWidth: "auto", itemWidth: 680, nameClient: 680, nameScroll: 680}이 나왔다. 개발자 도구의 Styles에서 .content에 min-width: 0을 추가하고 다시 실행하자 {minWidth: "0px", itemWidth: 242, nameClient: 242, nameScroll: 680}으로 바뀌었다. 앞의 짧은 HTML도 같은 브라우저에서 이 두 결과를 확인했다.

minWidth: "auto"라는 문자열 자체가 최소 너비의 픽셀값은 아니다. getComputedStyle 설명↗ (새 탭에서 열림)에 따라 실제 적용된 스타일을 읽고, 요소가 차지한 폭과 함께 판단한다. 이 예제의 파일명 상자에는 테두리와 패딩이 없어 itemWidth와 nameClient를 바로 비교할 수 있다. 자기 카드의 박스 구성이 다르면 그 차이도 계산해야 한다.

파일명 상자가 부모에게서 받은 폭 그대로 길게 늘어나 있고 flex item의 최소 너비가 auto라면, 그 item의 최소 너비를 먼저 바꿔 본다. 이미 파일명 상자의 폭이 제한돼 있고 scrollWidth > clientWidth인데도 생략 표시가 없다면, 그 파일명 요소에 overflow: hidden, white-space: nowrap, text-overflow: ellipsis가 실제 적용됐는지 확인한다. .content도 줄었는데 카드가 계속 넘친다면 다른 자식의 고정 폭·간격·최소 너비를 함께 확인한다.

이 결과를 모든 flex item에 min-width: 0이 필요하다는 규칙으로 확대할 수는 없다. 말줄임 처리를 flex item 자체에 적용해 그 요소의 overflow도 바뀐 구조라면 자동 최소 크기 조건부터 달라진다. 이번에 비교한 것은 overflow: visible인 바깥 flex item과 overflow: hidden인 안쪽 파일명을 분리한 구조다.

검증은 합성 영문 파일명, 가로 방향 flex, 고정 320px 카드와 위 두 뷰포트에 한정했다. 장치 픽셀 비율은 1이었다. 390px 비교는 데스크톱 Chromium의 뷰포트 변경이며 실제 휴대전화 검증은 아니다. 다른 브라우저 엔진, 세로 방향 flex, 이미지의 종횡비나 여러 겹의 flex item이 있는 구성은 실행하지 않았다. 글꼴이 다르면 680px라는 수치는 달라질 수 있으므로, 자기 화면에서는 바깥 item이 줄었는지와 안쪽 파일명이 생략됐는지를 함께 확인한다.