Почему ellipsis не срабатывает во flex и grid?

Во flex и grid элементы по умолчанию не хотят сжиматься меньше своего контента, из-за этого текст может выталкивать соседей и ломать layout:
.title {
overflow: hidden;
text-overflow: ellipsis;
}

Даже с ellipsis элемент может не обрезаться, потому что ему не разрешено сжиматься:
.item {
min-width: 0;
}

Эта строка явно разрешает элементу ужиматься по доступному пространству, и всё начинает работать как ожидается:
.item {
min-width: 0;
}

Особенно критично для flex и grid-колонок с 1fr, где переполнение встречается чаще всего.

Если где-то ломается текст или layout — в 50% случаев не хватает именно min-width: 0.

Code Ready | #совет