如何使内联div元素在父元素收缩时收缩宽度

Question

下面是一个jsfiddle，展示了我想要实现的行为：

使用Flex布局的JSFiddle

<span>See JSFiddle For Code</span>

图像显示最右边的分区显示椭圆

您可以看到，我在一行中显示了多个div元素。每个div都显示一些文本。由于父div的大小调整得更窄，我希望当前显示的最右边的div缩小（显示省略号）。请注意，当您缩小fiddle框架宽度或缩小浏览器时，只有最右边的div会缩小，显示省略号。

jsfiddle使用flex布局来实现这一点，但我需要一个不使用flex布局或JavaScript的解决方案。

我试过让每个div使用display:inline块和其他一些技术，但没有成功。

Answer 1

我想你想要这样。请检查演示

.parent
 {
  display: table;
 }
.child
 {
 display: table-cell;
 }

Answer 2

我发现了它，并更新了JSFiddle，以展示如何通过简单地使用display:inline来实现它。flex解决方案比需要的要复杂得多。