Flex Box: обернуть и оптимизировать размер контейнера [дублировать] ⇐ CSS

[Anonymous]

Я работаю над управлением, генерируемым в React (HEROUI). Управление генерируется как гибкий div , и я пытаюсь минимизировать его ширину, когда элементы обернуты в несколько строк.
Как mre, я создал это Jsfiddle. В зависимости от ширины или вашего дисплея/браузера, вы можете получить:


Что меня раздражает. /> Я пытаюсь: < /p>

[*] уменьшить ширину контейнера, чтобы избавиться от этого дополнительного пространства.
Я хотел бы Контейнер имеет минимальную ширину (больше об этом позже), хотя, если это только таким образом, это было бы хорошо.

Если возможно, заставьте его быть элементами 3x3.
Макет на снимке экрана не работает с менее чем 3 рядами, поэтому наличие элементов 3x3 еще больше уменьшит ширину без увеличения высоты. < /p>
< /li>
< /ol>
Я попробовал несколько подходов к решению этого вопроса, безрезультатно. < /p>
Среди Это, ширина: min-content действительно минимизирует ширину контейнера, но слишком агрессивна: она находит абсолютную минимальную ширину контейнера, размещая все элементы в 1 столбце, когда я пытаюсь найти минимальную ширину Не изменяя его оптимальную высоту .
в основном, он ведет себя так, как будто я установил управление гибкой: column;
из-за того, что за Div выглядит на остальной части реальной страницы, динамически растягивая элементы, увеличение разрыва между ними или изменение их горизонтального выравнивания, чтобы уменьшить/устранить дополнительное пространство, не то, что я хочу сделать.
Есть ли способ сделать обе точки 1. и 2.? Или хотя бы 1.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ainer-size