min-width 0 и overflow в Flexbox

Flex-элементы по умолчанию имеют min-width: auto, что не позволяет им сжиматься меньше их содержимого — установка min-width: 0 снимает это ограничение и позволяет overflow и flex-shrink работать корректно.

Зачем нужно

Это один из самых неочевидных подводных камней Flexbox. Когда flex-элемент содержит длинный текст, таблицу или изображение, он отказывается сжиматься ниже размера своего контента — несмотря на flex-shrink: 1. Установка min-width: 0 исправляет это поведение и позволяет overflow: hidden или text-overflow: ellipsis корректно работать.

Где используется

  • Обрезание длинного текста (text-overflow: ellipsis) внутри flex-элемента
  • Flex-раскладки с таблицами или <pre> — они распирают контейнер
  • Sidebar + main-content раскладки, где контент может быть широким
  • Карточки с именами файлов или URL

Проблема: min-width: auto

/* Проблема: длинный текст выходит за контейнер */
.flex {
  display: flex;
}

.item {
  flex: 1;
  /* min-width: auto — по умолчанию! */
  /* Элемент не сжимается меньше ширины текста */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* НЕ РАБОТАЕТ */
}

<div class="flex">
  <div class="item">Очень-очень-очень длинное название файла которое не обрезается.pdf</div>
  <button>Скачать</button>
</div>

Решение: min-width: 0

.flex {
  display: flex;
}

.item {
  flex: 1;
  min-width: 0; /* ВАЖНО: разрешаем сжатие */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Теперь работает */
}

Альтернатива: overflow: hidden на самом элементе

/* overflow: hidden создаёт новый блочный контекст */
/* и неявно снимает ограничение min-width */
.item {
  flex: 1;
  overflow: hidden; /* тоже решает проблему */
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

  1. Забыть min-width: 0 — text-overflow: ellipsis без него не сработает во flex.
  2. Применять к контейнеру вместо элемента — min-width: 0 нужен на flex-элементе, а не на контейнере.
  3. Не сочетать с white-space: nowrap — для ellipsis нужны оба свойства плюс overflow: hidden.

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

Ресурсы