flex 안에서 text-overflow: ellipsis가 안 먹고 텍스트가 넘쳐버려요

Question

좌측에 아바타, 우측에 긴 제목이 들어가는 리스트 아이템을 flex로 만들고 있는데요, 제목이 길면 ...으로 잘리게 하려고 흔히 아는 3종세트를 넣었습니다.

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

근데 잘리기는커녕 텍스트가 컨테이너 너비를 그냥 뚫고 나가서 옆으로 삐져나가고, 심지어 부모에 가로 스크롤까지 생깁니다. 부모는 display: flex이고 제목 div가 그 안의 자식이에요. 같은 CSS를 flex 아닌 일반 블록에 적용하면 잘 잘리거든요. flex만 들어가면 이러네요. 뭘 놓치고 있는 걸까요?

김영삼 · Accepted Answer

flex 아이템의 min-width 기본값이 auto라서 그렇습니다. min-width: auto는 "내용물보다 작아지지 마라"는 뜻이라, 제목 텍스트가 안 줄어드는 거예요. overflow: hidden이 동작하려면 그 요소가 부모보다 좁아질 수 있어야 하는데, flex 아이템은 기본적으로 자기 내용 크기 밑으로는 안 쪼그라들거든요. 그래서 ellipsis 규칙이 적용될 여지 자체가 안 생깁니다.

해결은 그 제목 div에 min-width: 0을 주는 거예요. 이 한 줄이면 됩니다. 그러면 flex 아이템이 내용보다 좁아지는 걸 허용하고, 그때부터 overflow: hidden과 ellipsis가 정상 동작합니다. 아바타 쪽은 flex-shrink: 0으로 고정해두면 제목만 줄어들고요.

중첩 flex라면 각 단계마다 min-width: 0을 내려줘야 할 수도 있어요. flex 컨테이너가 또 다른 flex 안에 들어있으면 안쪽만 고쳐선 안 되고 바깥 아이템에도 min-width: 0이 필요합니다. 참고로 세로 방향(flex-direction: column)에서 같은 증상이 나면 그건 min-height: 0이에요. 원리는 똑같습니다.

css_dowon · Answer

와 min-width: 0 한 줄로 끝났네요... 이거 진짜 몇 번을 삽질했는데. 중첩된 바깥쪽에도 넣어야 한단 것도 딱 제 상황이었어요. 감사합니다!

댓글 2