仅使用css匹配沿行的动态内容的元素宽度

Question

我一直在尝试使用flexbox，但任何其他仅限css的解决方案都是可以接受的。

我希望一行中的所有项目都扩展到最大项目的宽度，因此结果是相同的宽度。但是，同时没有父元素扩展到超出完成此任务所需的最小大小。

如果您查看我的Codepen示例，更改<ul>元素上的flex-grow值将使这适用于某些演示示例，但不是全部。

http://codepen.io/MattyBalaam/pen/VepxWq

div {
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  justify-content: center;
  padding: 0 0 2em;
  flex-grow: 0.15;    
}
li {
  list-style: none;
  margin: 2em;
  flex: 1 1 0;
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>----3----</li>
  </ul>
</div>