包裹时Inline-flex不适合内容

我有一个带有内部div的容器，其中包含项目。

 

  1
 

容器或内部div宽度不固定。容器可以调整大小。内部div应该始终适合它的内容。

应该发生的是，内部div应该始终在容器内部居中。

当内部div内的项目无法再放入容器内时，应分成第二行。

我正在使用display: flex并且display: inline-flex将内部div居中。但是，当项目换行到第二行时，内部div将占用容器的宽度，并且不再适合内容。因此，它不会位于容器的中心。

这是当前情况的一个小提琴。

在保持内部div 宽度动态的同时，如何始终使内部div始终居中于容器。

预期成绩：