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占用容器的宽度，并且不再适合内容。因此它不会以容器为中心。

以下是fiddle目前的情况。

如何始终使内部div始终以容器为中心，同时保持内部div 宽度动态。

预期结果：

Answer 1

添加：

.inner{margin: auto 15%;}

这将使内部div保持居中。

或简单地设置所需的宽度比例，例如

.inner{width: 80%;}