How to affect minimal width of the HTML5 progress element?

Question

There is a similar question which deals with input elements having intrinsic minimal width determined by the size parameter.

I am trying to design a layout where there is an inline-flex with flex-direction: column block like this:

.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

When the text is long, the progress correctly stretches across the available width which is determined by the length of the text because the parent div is inline-flex so it by itself won't stretch in its parent horizontally.

However when the text is very short, the progress doesn't shrink to the same length the text has. Instead, it stays at some (probably UA specific) minimum. I can affect its width with width, but than needs a fixed number, I need it to follow the lead of the text and copy its width.

In the case of the input in the linked question, one could set a small size and problem solved, however, with progress, no such attribute exists.

Is there a way to solve this layouting issue so that the progress width always follows the text width?

Added code and Fiddle. Width of 100 % won't work, because the progress is what gives the parent the value of width which would be those 100 %. I want it to be shorter, as short as the top atop it. — Tomáš Hübelbauer, Jan 30 '19 at 00:29
Sorry, I still don't understand. Is [this](https://jsfiddle.net/hkb45qmf/) not what you're looking for? The progress bar matches the width of the text. Also it is not a self closing tag so it should be `` not ``. — sallf, Jan 30 '19 at 00:38
I am looking for a way to make the first progress, the one underneath the word "short" as long as the word "short" is, width-wise. If the word changes (say to "short etc.", the progress bar should still copy the width of the text i.e. it should not be hardcoded. — Tomáš Hübelbauer, Jan 30 '19 at 00:42
@sallf, the confusion may be arising because your code sample works in Chrome and Edge, but not Firefox. Same as my answer. OP must be testing in FF. — Michael Benjamin, Jan 30 '19 at 01:42
My apologies, it didn't occur to me that such a basic thing could work differently in different browsers. — Tomáš Hübelbauer, Jan 30 '19 at 02:04

Michael Benjamin · Answer 1 · 2019-01-30T02:19:05.623

2

Note that as of this writing, the solution below works in Chrome and Edge, but not Firefox.

Add this to your code:

progress { width: auto }

Now the progress element will track the width of its inline-level parent.

Browsers set a default width on the progress element. Chrome uses width: 10em.

By setting your own width you override the default.

.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>

edited Jan 30 '19 at 02:19

answered Jan 30 '19 at 01:04

Michael Benjamin

346,931
104
581
701

Thank you for the answer, I'd really love to see if there is a way to make this work in Firefox, too. If one doesn't pop up in a few days, I'll mark your answer as correct. – Tomáš Hübelbauer Jan 30 '19 at 02:05
Yeah, I've been looking. Nothing yet. Also, note that the `progress` element is not a [void element](https://www.w3.org/TR/html5/syntax.html#void-elements). It requires both opening and closing tags ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)). – Michael Benjamin Jan 30 '19 at 02:18
@TomášHübelbauer you can try this workaround for firefox : https://jsfiddle.net/4gezmord/ – Temani Afif Jan 30 '19 at 08:29
`width: auto` appears to now work on more recent versions of Firefox AFAICT. – Edric Jan 11 '23 at 02:46

score 2 · Accepted Answer · answered Jan 30 '19 at 09:52

In addition to Michael_B answer here is another hack that will force the width of the progress tag to be 100% and it will work on firefox too:

.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>

How to affect minimal width of the HTML5 progress element?

2 Answers2