Почему текст внезапно ломает grid и вылезает за контейнер?

Очень частый баг в CSS Grid: ставишь overflow: hidden, ellipsis, 1fr, а текст всё равно раздвигает layout и игнорирует ограничения.

Кажется, что проблема в overflow.
.title {
overflow: hidden;
text-overflow: ellipsis;
}

Но проблема часто вообще не в этом.

У grid-элементов по умолчанию стоит min-width: auto, из-за чего элемент отказывается сжиматься меньше контента.

Решение — явно разрешить сжатие.
.grid-item {
min-width: 0;
}

После этого начинают нормально работать:
.title {
white-space: nowrap;
text-overflow: ellipsis;
}

Важно: min-width: 0 нужно ставить именно на grid/flex item, а не обязательно на сам текстовый элемент.

Особенно критично для card-layout, dashboard, table, navbar и любых grid/flex интерфейсов с длинным текстом.

Code Ready | #совет