There is a similar question which addresses input elements having a minimum width determined by the size parameter.
I am attempting to create a layout with an inline-flex element with a flex-direction: column property 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>When the text is long, the progress expands correctly to the width of the text because the parent div is inline-flex and does not stretch horizontally on its own.
However, when the text is very short, the progress does not shrink to match the text length. Instead, it remains at a predetermined minimum width. I can adjust the progress width using the width property, but this requires a fixed value, whereas I need it to adapt to the text width.
In the case of the input element in the linked question, adjusting the size attribute would solve the issue. However, with the progress element, there is no such attribute to control width.
Is there a solution to ensure that the progress width always matches the text width in this layout?