Как обернуть несколько элементов в контейнер flexbox с границей, которая не простирается на всю ширину страницы? ⇐ CSS

[Anonymous]

Я новичок в этом. Я пытаюсь создать контейнер flexbox для нескольких элементов с границей, которая не охватывает всю ширину страницы и вместо этого обтекает элементы независимо от их значения «flex-basis». Вот код:

тело { цвет: RGB(0, 0, 0); размер шрифта: 1.2rem; } .стол { дисплей: гибкий; гибкое направление: строка; граница: 5 пикселей сплошной RGB (75, 100, 182); } .таблица > * { гибкая основа: 100 пикселей; } .бронза { цвет фона: rgb(116, 97, 44); } .серебро { цвет фона: серебро; } .золото { цвет фона: золото; } .платинум { цвет фона: rgb(69, 179, 173); } .бриллиант { цвет фона: RGB(175, 81, 175); } Бронза Серебро Золото Платина Бриллиант Я хочу иметь возможность изменять значение «flex-basis» для всех элементов в контейнере и при этом иметь границу вокруг всех элементов, а не расширяться на всю ширину страницы.

Если я изменю display: flex; на display: inline-flex, а затем использую width вместо flex-basis тогда это работает, но я не хочу использовать width, просто flex-basis. Я не хочу менять flex-direction контейнера. Я пробовал изменить отображение на inline-flex и не использовать width, но это приводит к тому, что flex-basis полностью игнорируется. Я учусь, поэтому мои знания ограничены, но я попробовал все, что знаю, и ничего не помогло. Я в тупике.