"A percent-width flex child renders as a floating pill, not a left-anchored progress fill"

A progress bar built like this:

<div class="track">
  <div class="fill" style="width: 20%"></div>
</div>

with the fill as a plain flex child renders the fill as a small detached pill floating partway along the track — not a left-anchored bar. A 20% fill reads as a floating blob roughly a fifth of the way across. Both the track and fill colors render, the stylesheet compiles clean, and the artifact is most obvious at low percentages where the fill is narrow.

Engine panels are flex containers, and the engine's flex layout does not left-pin an under-width percentage child the way a browser does. Instead the child is placed as a flex item — center-justified in observed cases — so an under-width fill sits wherever the flex justification puts it rather than anchored to the left edge. The percentage width is honored; the position is not what a browser-trained eye expects.

Fills are absolute, not flex children. Make the track a positioning context and take the fill out of flow:

.track {
    position: relative;
}

.fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;   // set dynamically via style binding
}

The percentage width still applies inline as usual, but the fill is now anchored to the track's left edge instead of being justified as a flex item.

In one project, every working bar used this recipe while four surfaces built as plain flex children all showed the floating-pill artifact; converting the four to the absolute pattern fixed all of them with no markup changes. When auditing, grep any style="width: ...%" fill for a missing position: absolute.

Absolute positioning removes the fill from the flex flow entirely, so the parent's justify-content no longer decides where it sits. left: 0 pins it to the track's left edge, and the percentage width then grows the bar rightward from that anchor — the behavior you actually wanted from a progress fill.

This is the same root lesson as the flex-grow track feedback loop: progress fills belong out of flow, absolutely positioned inside a relative track. If you also see a comet/tapered artifact rather than a floating pill, check the track for a stray overflow: hidden.