Как сделать так, чтобы flexbox не занимал всю ширину области просмотра? ⇐ CSS

[Гость]

Я попробовал выполнить поиск и не смог найти точно похожего вопроса, поэтому разместил его здесь.
Итак, у меня есть несколько блоков div внутри гибкой оболочки с переносом строк, и я хочу иметь границу для оболочки. Проблема, с которой я сталкиваюсь, заключается в том, что граница всегда будет охватывать 100% области просмотра, а не уменьшаться, чтобы соответствовать только элементам. Как я могу добиться этого без использования медиа-запросов или JS? Я бы предпочел решения со встроенными стилями, поскольку это наиболее предпочтительно в данном сценарии.
Примеры кода:
Основной код для моих блоков:

Код: Выделить всё

  

.
.
.

По сути, эта граница должна быть здесь:

Я попробовал добавить еще одну обертку снаружи с помощью display:table, но это работает только тогда, когда все блоки находятся в одной строке; когда блоки переходят на следующую строку; он снова занимает всю ширину.

Код: Выделить всё

.
.
.

Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/782 ... port-width