CSS · справочник

Свойство min-width

min-width не позволяет элементу стать уже заданного значения. Свойство полезно для кнопок и колонок, но может создать горизонтальную прокрутку на телефоне.

Нижняя граница

Обычная width может уменьшаться в гибкой раскладке, а min-width защищает минимально допустимый размер.

.button {
  min-width: 160px;
  padding: 12px 20px;
}

Особенность Flexbox

У flex-элемента автоматический минимум иногда мешает сжатию длинного текста. min-width: 0 разрешает колонке стать уже содержимого, после чего можно применять перенос или ellipsis.

.card__content {
  min-width: 0;
}
.card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Частые ошибки

Минимум шире экрана.
Конфликт width и min-width.
Забытый min-width: 0 во flex.
Фиксировать ширину длинного текста.

Практика

Собери flex-карточку с иконкой и длинным заголовком. Исправь переполнение через min-width: 0 и text-overflow.

Связанные темы

width · max-width · Flexbox