Как уменьшить flex при уменьшении контейнера

Используйте свойство flex-shrink для управления сжатием flex-элементов. По умолчанию flex-shrink: 1, что позволяет элементам сжиматься пропорционально их базовому размеру. Если нужно изменить пропорции, задайте разные значения.

.item {
  flex-shrink: 2; /* Сжимается в 2 раза быстрее других */
}

Для полного контроля можно использовать сокращённое свойство flex:

.item {
  flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
}

Если элемент не должен сжиматься вообще, установите flex-shrink: 0.