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

[Anonymous]

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

< /p>
Просто чтобы быть ясным, элементы имеют одинаковую ширину, потому что я поспешно скопировал их тексты, а не потому, что я хочу, чтобы они имели то же самое Ширина.
Что меня раздражает дополнительная синяя область справа от пункта 4 и элемент 8 .
Я пытаюсь: (подробнее об этом позже) ширина, хотя, если бы это только выглядит [/b] таким образом, это было бы хорошо. быть элементами 3x3.
макет на снимке экрана не работает с менее чем 3 строками, поэтому наличие элементов 3x3 еще больше уменьшит ширину без увеличения высоты. < /p>
< /li>
[/list]
Я попробовал несколько подходов к решению этого вопроса, безрезультатно. > Действительно минимизирует ширину контейнера, но слишком агрессивна: находит минимальную ширину контейнера , тогда как я ищу минимальную ширину , которая не изменяет контейнер Высота . в той же строке. Уменьшить/исключить дополнительное пространство - это не то, что я хочу сделать.
Есть ли способ сделать обе точки 1 и 2.? Или как минимум 1.? поймет, что он не отвечает на мой: < /p>

• Этот другой вопрос начинается с предпосылки, что ширина контейнера фиксируется (CSS устанавливает его ширину < / Код>), тогда как мой Вопрос о минимизации. Вопрос никогда не об этом (и моя скрипка поставляется с типом списка: нет; ).
• Принятый ответ Отбрасывает фиксированную ширину Для контейнера, но не касается минимизации ширины: < /p>
  
  Предоставленная демонстрация и связанный контент никогда не минимизируют ширину < /li>
  < li> Ответ 9 лет, и сейчас все могло измениться < /li>
  Автор говорит: < /li>
  < /ul>
  
  родитель Контейнер не знает, когда его дети завершаются. Следовательно, он продолжает масштабировать свой размер, не обращая внимания на то, что происходит внутри. Поскольку его высота очень правильно увеличивается.
  Я бы утверждал, что единственная цель контейнера состоит именно с тем, чтобы решить, какие элементы должны быть перенесены на следующую строку. Это замечание также не адресовано.

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