Css 在转换中将未知项的宽度设置为其全宽

我有跨度元素。在里面我有一个未知数量的小16x16图像。全部在一行中

如果我将“宽度”设置为“自动”，它将正确地获取其全宽

但问题是，我想做一个过渡。所以我把宽度设为10px。然后在悬停时，我将其设置为100%，这很糟糕，因为它占用了父容器宽度的100%。所以我想把它设置为自动，但它没有动画。有解决办法吗？ 提琴：鼠标悬停在右侧浅蓝色方框上，方框内有三个红色方框：

上面的小提琴链接

小提琴片段：

<div>
    <span>
        <span class="img"></span>
        <span class="img"></span>
        <span class="img"></span>
    </span>
</div>
<style>
* {
    padding: 0;
    margin: 0;
}
div {
    background-color: midnightblue;
    text-align: right;
}

div > span {
    background-color: steelblue;
    height: 100%;
    width: 30px;
    transition: width 1s;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

div > span:hover {
    width: 100%;
}

.img {
    width: 16px;
    height: 16px;
    outline: 1px solid red;
    display: inline-block;
}
</style>

* {
填充：0；
保证金：0；
}
div{
背景色：午夜蓝；
文本对齐：右对齐；
}
div>span{
背景颜色：钢蓝色；
身高：100%；
宽度：30px；
过渡：宽度1s；
溢出：隐藏；
显示：内联块；
空白：nowrap；
}
div>span:悬停{
宽度：100%；
}
.img{
宽度：16px；
高度：16px；
轮廓：1px纯红；
显示：内联块；
}

编辑： 我正在考虑将其设置为

宽度：计算（自动）

？也许会有用

---

编辑：calc auto不起作用：

唯一的方法是在

最大宽度上使用转换。悬停时，必须应用始终大于最大值的。与实际宽度的差异越大，过渡越快

演示：

它不是完美的，如果知道这个宽度可以达到的某些限制，那就太好了，但是它可以工作，而且仍然是纯CSS。否则，你应该使用JS，因为转换
scaleX
（唯一的“转换到自动”的方法）不会得到你想要的行为。
你能把你到目前为止所拥有的东西放到一个文档中，并在一个片段中发布你的示例并添加到你的问题中吗？我以前遇到过这个问题，因为转换需要两个数值，所以ti来回移动。最后，我使用JS获取外部宽度。添加了代码片段。是的，我试图避开js：（我希望calc（自动+0px）能做到：（这很好，谢谢你。不过你可以看出过渡动画很奇怪。因为它仍在增长到200px，但刚刚被切断。我试图设置
max width:auto
，并将hover设置为
width:100%
，但这不起作用，但主意不错。很高兴你喜欢它！我还想到你可以数一数图像和视频的数量。）将其放置在一个属性中，然后对其进行动画处理：
width:calc（16px*attr（data total））
但现在浏览器似乎不支持
attr（）
除了
内容之外的任何地方都可以。真是太遗憾了。哦，天哪！！那真是天才！！！！这是一个很棒的临时解决方案！！！我正在制作一个firefox插件，所以它可以工作！！谢谢！编辑：oops nevr mind:（好主意，tho