Code Ready | Frontend
Почему 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 | #совет Если у вас установлено приложение,
вы можете сразу перейти в канал