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

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

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

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