Ellipsis that never truncates in Flexbox

The .title has white-space: nowrap; overflow: hidden; text-overflow: ellipsis, but a long title pushes .main wider than the screen instead of truncating. What fixes it?

.layout { display: flex; }
.sidebar { width: 240px; flex-shrink: 0; }
.main { flex: 1; }
.main .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }