CSS flexbox динамическое изменение размера: предпочтительнее max-width

У меня есть контейнер flexbox, который обертывается.
На элементах в нем я установил:

• flex: 1;, поэтому элементы растут, чтобы заполнить горизонтальный контейнер
• min-width: X; max-width: Y;', поэтому элементы остаются в допустимом размере.

Вот простой пример codepen.

Проблема (как показано в примере) - это поведение обрезания размера.

Что происходит:
Каждый элемент как можно меньше, поэтому максимальное число из них помещается в первую строку, а затем увеличивается настолько, насколько необходимо для заполнения строки. Поэтому элемент max-width почти никогда не достигается, а элементы намного ближе к min-width.

Что я ищу:
Каждый элемент максимально велик, поэтому минимальное количество из них помещается в первую строку, а затем сокращается так же необходимо, чтобы добавить новый элемент и заполнить строку. Поэтому элемент min-width почти никогда не достигается, и элементы намного ближе к max-width.

Другими словами:
Я хочу минимально возможное количество элементов в строке, а не максимум.

Есть ли способ сделать это в CSS без JS?

Спасибо!