Почему 1fr ведёт себя не так, как ожидается?

Многие думают, что 1fr — это занять всё доступное пространство. На практике трек с 1fr часто упирается в минимальный размер контента (min-content) и не сжимается как ожидается.
.grid {
grid-template-columns: 1fr auto;
}

Если в первой колонке длинный текст или input, она может не сжаться и вытолкнуть вторую колонку.

Решение — явно разрешить колонке сжиматься:
.grid {
grid-template-columns: minmax(0, 1fr) auto;
}

minmax(0, 1fr) говорит браузеру: колонка может уменьшаться до 0, а не держаться за размер контента.

Теперь ellipsis, overflow и адаптив работают корректно.
.title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Это особенно важно для layout с заголовками, таблицами, карточками и input-полями.

Если используешь 1fr, в большинстве случаев безопаснее писать minmax(0, 1fr) — это избавляет от скрытых багов в grid.

Code Ready | #совет