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

Question

有一个similar question处理的input元素具有由size参数确定的固有最小宽度。

我正在尝试设计一种布局，其中有一个inline-flex带有flex-direction: column的块，如下所示：

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

<div>
  <div class="item">
    short
    <progress />
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress />
  </div>
</div>
<p>
  I want the first progress to be as long as the text "short" is.
</p>

Fiddle

当文本较长时，progress会正确地沿可用宽度延伸，该宽度由文本的长度决定，因为父级div为inline-flex，所以它本身不会t在其父级中水平拉伸。

但是，当文本很短时，progress不会收缩到与文本相同的长度。相反，它保持在某个最低值（可能是UA特定的）。我可以使用width来影响其宽度，但是除了需要一个固定的数字外，我还需要它跟随文本的开头并复制其宽度。

对于链接的问题中的input，可以设置一个小的size并解决问题，但是对于progress，不存在这样的属性。

是否有一种解决此布局问题的方法，以便进度宽度始终遵循文本宽度？

Answer 1

请注意，在撰写本文时，以下解决方案适用于Chrome和Edge，但不适用于Firefox。

将此添加到您的代码中：

progress { width: auto }

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

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

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

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: auto;
}

<div>
  <div class="item">
    short
  <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>

Answer 2

除了Michael_B答案，这里还有另一个 hack ，它将强制progress标签的宽度为100%，并且也可以在firefox上使用：

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: 0;
  min-width: 100%;
}

<div>
  <div class="item">
    short
    <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>