Выбор ответа Middle Flexbox обновлено
Текст распирает flex-колонку
Вопрос
В .content длинная строка без пробелов (URL), и страница получает горизонтальный скролл, хотя у колонки flex: 1. Что исправит?
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: min-width: 0 на .content. У flex-элемента min-width: auto по умолчанию: он не сжимается меньше минимального размера содержимого, а длинное слово его раздувает. min-width: 0 снимает ограничение, и дальше работает overflow-wrap или text-overflow. flex-shrink: 1 уже…
Варианты ответа
flex-shrink: 1на.contentflex-wrap: wrapна.layoutwidth: 100%на.contentmin-width: 0на.contentправильный ответ
Разбор
У flex-элемента min-width: auto по умолчанию: он не сжимается меньше минимального размера содержимого, а длинное слово его раздувает. min-width: 0 снимает ограничение, и дальше работает overflow-wrap или text-overflow. flex-shrink: 1 уже стоит в flex: 1. Перенос строк контейнера и width: 100% не отменяют минимальный размер содержимого.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.