如何影响HTML5进度元素的最小宽度？

有一个处理

输入的
元素，该元素具有由
大小
参数确定的固有最小宽度

我试图设计一个布局，其中有一个
inline flex
和
flex direction:column
块，如下所示：


.item{
边框：1px纯色灰色；
显示：内联flex；
弯曲方向：立柱；
}

短的
long on long so long是的long很长肯定比进度的默认宽度长

我希望第一个进度与文本“短”一样长。
请注意，在撰写本文时，以下解决方案适用于Chrome和Edge，但不适用于Firefox

将此添加到您的代码中：

progress { width: auto }

现在，
progress
元素将跟踪其内联级父级的宽度

浏览器在
progress
元素上设置默认宽度。Chrome使用
宽度：10em


通过设置自己的宽度，可以覆盖默认宽度


.item{
边框：1px纯色灰色；
显示：内联flex；
弯曲方向：立柱；
}
进展{
宽度：自动；
}

短的
long on long so long是的long很长肯定比进度的默认宽度长
我希望第一个进度与文本“short”一样长。
除了Michael_B答案之外，这里还有另一个黑客攻击，它将强制
进度标签的宽度为
100%
，并且在firefox上也可以工作：


.item{
边框：1px纯色灰色；
显示：内联flex；
弯曲方向：立柱；
}
进展{
宽度：0；
最小宽度：100%；
}

短的
long on long so long是的long很长肯定比进度的默认宽度长
我希望第一个进度和文本“short”一样长。
你能给它一个100%的宽度吗<代码>
。添加了代码和小提琴。宽度为100%不起作用，因为进度是为父级提供宽度值的原因，宽度值应为100%。我希望它短一点，和上面的一样短。对不起，我还是不明白。这不是你要找的吗？进度条与文本的宽度相匹配。另外，它不是一个自动关闭标签，所以它应该是
而不是
@sallf，这可能会引起混淆，因为您的代码示例在Chrome和Edge中工作，而不是在Firefox中工作。和我的答案一样。OP必须在FF中进行测试。很抱歉，我没有想到这样一个基本的东西在不同的浏览器中会有不同的工作方式。谢谢你的回答，我真的很想看看是否有办法在Firefox中也能做到这一点。如果几天内没有出现一个，我会把你的答案标记为正确。是的，我一直在找。还没有。另外，请注意，
progress
元素不是一个。它需要开始和结束标记（）。@TomášHübelbauer您可以在firefox上尝试以下解决方法：