Как управлять шириной flex-контейнера при переносе элементов?

Question

[pavelbazhan]

Необходимо сверстать блок произвольной ширины (outer), горизонтально по центру него располагается еще один блок (wrapper), который содержит некие небольшие карточки фиксированной ширины.

Сама задача в принципе решена, но я споткнулся на том, что внутренний flex-контейнер (wrapper), будучи переполненным, переносит очередной элемент на следующую строку, однако освободившаяся ширина контейнера остается на месте, за счет чего внутренний контейнер (wrapper) по ширине становится равен внешнему (outer) и не происходит выравнивание горизонтально по центру.

Можно ли как-то указать, чтобы при переносе элементов правый край контейнера выравнивался с границей последнего элемента в строке, а не занимал все возможное пространство? И если нет, то как тогда решить подобную задачу?

Демонстрация: https://codepen.io/nikel9/pen/JjovgJa

Если в HTML-блоке раскомментировать блоки после 6, то можно наглядно увидеть в чем вопрос, если написал непонятно.

Comments

[Максим Морев]

Забыли приложить демонстрацию

[pavelbazhan]

Максим Морев, точно, поправил, теперь ссылка есть

Answer 1

[Максим Морев]

Задачка интересная, вообще, как говорится, "со звёздочкой".
Пользователи IE и Edge в пролёте, ибо без fit-content задача не решается (имеется в виду решение на чистом CSS).
Как решить "для всех" без применения JS - не вижу, что чаще всего означает "никак" :)

Comments

[pavelbazhan]

Спасибо, это именно то, что нужно! Тоже думал про решение на JS, но очень уж хотелось сделать все через чистый CSS