Как повлиять на минимальную ширину элемента прогресса HTML5?

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, поэтому он сам по себе не будет растягиваться в родительском элементе по горизонтали.

Однако, когда текст очень короткий, progress неуменьшите текст до той же длины.Вместо этого он остается на некотором (вероятно, специфичном для UA) минимуме.Я могу повлиять на его ширину с помощью width, но чем нужно фиксированное число, мне нужно, чтобы он следовал за текстом и скопировал его ширину.

В случае input в связанном вопросеможно задать небольшое значение size и решить проблему, однако при использовании progress такого атрибута не существует.

Есть ли способ решить эту проблему с разметкой, чтобы ширина прогресса всегда соответствовала ширине текста

Answer 1

В дополнение к ответу Michael_B здесь есть еще один хак , который заставит ширину тега 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>

Answer 2

Обратите внимание, что на момент написания этой статьи решение ниже работает в 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>