Flexbox: распространённые баги и фиксы

Сборник типичных проблем при работе с Flexbox и их решений — от переполнения текстом до поведения flex-shrink и изображений.

Зачем нужно

Flexbox имеет несколько нетривиальных поведений, которые удивляют разработчиков: текст переполняет контейнер, изображения растягиваются, flex-basis: auto ведёт себя не как ожидается. Знание этих ловушек экономит часы отладки.

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

  • Любой проект с Flexbox
  • Карточки с переполняющимся текстом
  • Flex-контейнеры с изображениями
  • Вложенные flex-контейнеры

Основной контент

Баг 1: Текст переполняет flex-элемент

/* Проблема: по умолчанию min-width: auto — элемент не сжимается меньше контента */
.container { display: flex; }

/* Фикс */
.item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Баг 2: Изображения растягиваются

/* align-items: stretch (default) растягивает img по поперечной оси */
.card { display: flex; }

/* Фикс */
.card img {
  align-self: flex-start;
  /* или */
  object-fit: cover;
  width: 100%;
}

Баг 3: flex-shrink сжимает иконку/аватар

/* Фикс: запретить сжатие */
.item__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

Баг 4: Последний элемент в flex-wrap растягивается

/* С justify-content: space-between одинокий последний элемент растягивается */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Фикс: использовать flex-start + gap */
  gap: 16px;
}

/* Или использовать Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Баг 5: flex: 1 не равные колонки

/* flex: 1 = flex: 1 1 0 — base size 0, равные */
/* flex: 1 1 auto — base size = content size, НЕ равные */

/* Для действительно равных колонок */
.item { flex: 1 1 0; }
/* или */
.item { flex: 1; } /* то же самое */

Баг 6: position: fixed ломается внутри flex + transform

/* transform на flex-элементе создаёт containing block для fixed потомков */
.item {
  /* transform: ... — ломает position: fixed внутри */
}
/* Решение: вынести fixed-элемент за пределы transform-контейнера */

Баг 7: gap не работает (старые браузеры)

/* gap в flex появился позже, чем в grid */
/* Fallback */
@supports not (gap: 16px) {
  .container > * + * {
    margin-left: 16px;
  }
}

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

  • min-width: auto по умолчанию — главная причина переполнений; min-width: 0 — стандартный фикс на flex-элементах
  • flex: 1 ≠ flex: 1 1 auto — разный flex-basis даёт разное распределение пространства
  • Вложенные flex без min-width: 0 — на каждом уровне вложенности может понадобиться этот фикс

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

Ресурсы