Почему 1fr ведёт себя не так, как ожидается? — 3 апреля 2026 г. в 08:06:37.021
Почему 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 | #совет