flex-shrink: сжатие при нехватке места
flex-shrink задаёт участие flex-элемента в распределении отрицательного свободного места, когда содержимому тесно.
Назначение
flex-shrink задаёт участие flex-элемента в распределении отрицательного свободного места, когда содержимому тесно.
Как это работает
Реальное сжатие учитывает не только коэффициент, но и базовый размер. Значение 0 запрещает сжатие данного элемента; автоматические минимальные размеры также могут остановить уменьшение.
Пример
<style>
.row{display:flex;gap:10px;max-width:22rem}.mark{flex-shrink:0;width:5rem;background:#eaf4ee}.text{min-width:0;overflow-wrap:anywhere}
</style>
<div class="row"><div class="mark">HTML</div><div class="text">Длинное пояснение с адресом example.example.example.example</div></div>Что должно получиться
Метка сохраняет ширину, а пояснение принимает уменьшение и переносит длинный фрагмент. Это осознанное разделение ответственности двух элементов.
Граница применения и частая ошибка
Запрет сжатия всем детям легко создаёт горизонтальное переполнение. Для текстовой части часто нужны min-width:0 и определённое поведение длинных строк.
Самостоятельная проверка
Сужайте контейнер и наблюдайте фиксированную метку. Затем разрешите ей сжиматься и сравните; длинное содержимое не должно скрывать единственную кнопку действия.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.