包裹时Inline-flex不适合内容

Question

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

<div class="container">
 <div class="inner">
  <span class="item">1</span>
 </div>
</div>

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

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

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

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

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

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

预期成绩：

Answer 1

添加：

.inner{margin: auto 15%;}

这将使内部 div 保持居中。

或者简单地设置您想要的宽度比，例如

.inner{width: 80%;}