Hey there, I’m observing what appears to be a bug with stacks, auto width, and number inputs. When I place a number input inside of a horizontal stack and set the width of the number input to Fill, it appears that it does not actually fill when the stack width is smaller than some amount – instead the stack displays a horizontal scroll bar. Is this expected behavior, or can this be adjusted to actually fill for those smaller stacks?
I think this is a bug. the number input component has a minimum intrinsic width that it won't shrink below, even when set to Fill.
here’s some ideas on a workaround.
-
Disable the increment/decrement buttons. The stepper buttons on the number input are a significant contributor to the component's minimum width. In the number input's settings, turn off "Show increment buttons" (or similar — the label varies by version). This often reduces the minimum width enough that Fill behaves correctly at smaller stack sizes.
-
Set the stack to clip overflow instead of scroll If the Fill behavior is cosmetically acceptable but the scrollbar is the main annoyance, you can sometimes suppress the scrollbar via a custom CSS class on the stack container.
- overflow: hidden;
Hey @edahlseng, thanks for writing in! Could you share a screenshot or screen recording of what you're seeing? It would help to know roughly how wide the stack is when the scrollbar appears.
On my end, I was able to get number inputs to fill correctly across a range of stack widths, so I want to make sure I'm reproducing the same conditions you're running into.
