Flex 카드 말줄임이 안 되면, 제목을 감싼 요소부터 보세요

가로 Flex 카드에서 제목에 말줄임 속성을 넣었는데도 옆으로 넘친다면, 제목을 감싼 flex 아이템의 최소 너비를 보세요. 아래 구조에서는 .body에 min-width: 0을 넣으면 제목이 차지할 너비가 줄어듭니다.

AI와 함께 카드 목록을 만들다가 이런 화면을 만났다면, 이 구조에서는 글자 크기보다 요소의 너비를 먼저 확인할 수 있습니다. 먼저 제목 요소와 그 바깥 flex 아이템을 구분해 보세요.

고칠 곳은 제목이 아니라, 제목을 감싼 flex 아이템입니다

.body { flex: 1; min-width: 0; }

이 예제에서 .card는 가로 flex 컨테이너이고, 그 직계 자식 .body가 제목을 담습니다. 위 코드는 뒤에 나오는 .body { flex: 1; } 규칙을 교체하는 한 줄입니다. 아무 부모 요소에나 추가하는 코드는 아닙니다.

제목이 정해진 영역 밖으로 튀어나온 상황을 표현한 설명용 생성 일러스트입니다. 실제 브라우저 화면이나 측정 결과 그림은 아닙니다.

같은 긴 제목으로 전후를 비교해 보세요

다음은 실제 서비스가 아닌 합성 카드입니다. 제목에는 이미 한 줄 유지, 넘침 숨기기, 말줄임표 속성이 들어 있습니다. 그런데 그 제목을 감싼 .body의 최소 너비는 별도로 지정하지 않았습니다.

<div class="card">
  <span class="badge">자료</span>
  <div class="body">
    <p class="title">AI-generated-report-2026-very-long-filename-without-spaces.html</p>
  </div>
</div>
<style>
  .card { display: flex; width: 280px; gap: 12px; }
  .badge { flex: 0 0 40px; }
  .body { flex: 1; }
  .title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

확인한 환경에서는 카드 너비가 280 CSS px인데, 기본 상태의 .body는 464 CSS px로 남아 카드 밖으로 넘쳤습니다. 첫 번째 한 줄로 규칙을 교체하자 .body가 228 CSS px로 줄고 제목 끝에 말줄임표가 표시됐습니다.

280에서 배지 40과 간격 12를 뺀 자리가 228입니다. 464라는 글자 너비는 아래에 적은 글꼴·브라우저 환경의 측정값이지, 모든 환경에서 나오는 고정값은 아닙니다.

제목과 이를 감싼 요소가 다른 층이라는 개념을 보여주는 설명용 생성 그림입니다. 실제 DOM 구조를 그대로 그린 도면은 아닙니다.

flex: 1만으로 최소 너비가 없어지지는 않습니다

W3C의 Flex 아이템 자동 최소 크기 규정은 넘침 값이 비스크롤 값인 flex 아이템의 자동 최소 크기를 콘텐츠 기반으로 정합니다. 여기서는 가로 배치의 일반적인 div이고, .body의 넘침 값은 기본값인 visible입니다. 한 줄로 유지되는 긴 제목이 이 최소 너비에 영향을 줍니다.

min-width: 0은 이 예제의 최소 너비 제한을 낮춥니다. 글자 크기를 줄이거나 문자열을 잘라 저장하는 명령은 아닙니다. 원래 제목 문자열도 그대로 남습니다.

너비를 줄이는 일과 말줄임표를 그리는 일은 다릅니다

min-width: 0만 넣었다고 말줄임표가 저절로 생기지는 않습니다. 같은 카드에서 제목의 overflow를 visible로, text-overflow를 clip으로 바꾸자 .body 너비는 228로 줄었어도 긴 글자는 다시 밖으로 보였습니다.

한 줄 말줄임을 원한다면 이 예제처럼 제목 쪽의 white-space: nowrap, overflow: hidden, text-overflow: ellipsis도 함께 필요합니다. W3C의 text-overflow 정의도 블록의 줄 끝을 넘친 인라인 콘텐츠를 어떻게 표시할지 설명합니다. 최소 너비와 표시 방식을 같은 설정으로 보면 고칠 위치를 놓치기 쉽습니다.

줄어들 수 있는 너비와 넘친 글자의 표시는 별도 조건이라는 설명용 생성 일러스트입니다.

수정 뒤에는 이 예제처럼 제목을 담은 flex 아이템의 너비가 실제로 줄었는지 확인하세요. 이 글은 위 가로 카드 한 구조를 다룹니다. 세로 flex, 중첩된 다른 flex 조상, 고정 최소 너비, Grid까지 같은 한 줄로 해결된다는 뜻은 아닙니다.

AI가 화면을 고쳤다고 보고한 뒤 무엇을 더 확인할지 정하려면 완료 보고와 실제 코드 검수를 구분한 글로 이어갈 수 있습니다. 이번 문제에서는 먼저 ‘어느 요소의 너비가 줄지 않았나’를 비교하는 것이 핵심입니다.

2026년 10월 25일 Windows x64의 Aside 브라우저에서 본문과 같은 HTML·CSS로 합성 카드를 확인했습니다. 글꼴은 Arial 계열 16px, User-Agent가 보고한 Chrome 버전은 154.0.0.0입니다. 이 버전 문자열은 브라우저의 보고값이며 다른 브라우저·실제 사용자 서비스 전체를 검증한 결과가 아닙니다.

출처 및 확인일

• W3C, CSS Flexible Box Layout Module Level 1 — 4.5. Automatic Minimum Size of Flex Items. 확인한 공개판: 2025-10-14 Candidate Recommendation Draft. 확인: 2026-10-25 KST.
• W3C, CSS Overflow Module Level 3 — text-overflow. 해당 조항의 별도 게시·수정일 미표기. 확인: 2026-10-25 KST.