Почему колонка 1fr не сжимается
Вопрос
В колонке 1fr лежит длинная ссылка без пробелов, и сетка вылезает за экран с горизонтальным скроллом. Какая правка исправит это точнее всего?
.layout { display: grid; grid-template-columns: 240px 1fr; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
- Заменить
1frна100% - Добавить контейнеру
overflow: hidden - Заменить
1frнаauto - Заменить
1frнаminmax(0, 1fr)правильный ответ
Разбор
1fr равен minmax(auto, 1fr), а минимум auto для элемента сетки не меньше его min-content, то есть длины неразрывной строки. minmax(0, 1fr) разрешает колонке сжаться (дальше можно добавить overflow-wrap: anywhere). 100% даст колонку во всю ширину контейнера плюс 240px, переполнение станет только хуже. overflow: hidden у контейнера просто обрежет контент, а не починит раскладку. auto по-прежнему не сжимается меньше содержимого.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.