Почему flex-элемент не сжимается меньше содержимого и как это исправить?

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

Типичная ситуация

Колонка с flex: 1 содержит длинную строку без пробелов, и из-за неё вся раскладка выходит за экран.

Решение

.content {
  flex: 1;
  min-width: 0;          /* разрешаем сжиматься меньше содержимого */
  overflow-wrap: anywhere;
}

Для вертикального направления аналогично нужен min-height: 0, чтобы дочерний блок с overflow: auto прокручивался, а не растягивал родителя.

Тот же приём в Grid

minmax(0, 1fr) вместо 1fr.

Коротко для собеседования

Минимальный размер flex-элемента равен размеру контента. Лечится min-width: 0 (и min-height: 0 для вертикали).