Необходимо сверстать блок произвольной ширины (outer), горизонтально по центру него располагается еще один блок (wrapper), который содержит некие небольшие карточки фиксированной ширины.
Сама задача в принципе решена, но я споткнулся на том, что внутренний flex-контейнер (wrapper), будучи переполненным, переносит очередной элемент на следующую строку, однако освободившаяся ширина контейнера остается на месте, за счет чего внутренний контейнер (wrapper) по ширине становится равен внешнему (outer) и не происходит выравнивание горизонтально по центру.
Можно ли как-то указать, чтобы при переносе элементов правый край контейнера выравнивался с границей последнего элемента в строке, а не занимал все возможное пространство? И если нет, то как тогда решить подобную задачу?
Демонстрация:
https://codepen.io/nikel9/pen/JjovgJa
Если в HTML-блоке раскомментировать блоки после 6, то можно наглядно увидеть в чем вопрос, если написал непонятно.
Простой
