I have the following HTML elements:
- green - main wrapper
- orange - elements wrapper
- red - counter
- gray - input
The input has a fixed min width of 80px. The counter has a width of whatever the width of the text inside it has. The elements wrapper takes up the rest of the width.
The elements wrapper also has a flex-wrap: wrap property and an overflow: hidden, which means that any items that can't be fully displayed are hidden.
In my current example there is a gap between the last element ("4") in the elements wrapper and the counter. This gap doesn't have the required width to fit the next element ("5"). I'd like the input element to grow and take up that remaining space. Like so:
Said in other words, I'd like the elements wrapper to be as wide as possible in order to fit as many elements as possible, but without leaving empty gaps of "unused" space. The "unused" space should be filled by the input, which should "grow" when required.
Is this possible?