Currently I have a wrap with pills inside of it, the pills have dynamic width to fit the text inside them. I need to make it so that the pills are side by side until they overflow, and go to the next line. Additionally, if a pill takes up more than the width of the wrap, the pill text goes to the next line of the pill, increasing the pills height.
I can so far only get one of those behaviors to work. Either they are side by side, but when a pill is wider than the width, it overflows instead of wrapping the text to a new line inside the pill. Or, I can get the text to wrap to the next line inside the pill, but that makes only a single pill appear on each row. Likely because it's flexible, so it's assuming the full width but I don't set flex on them.
So if I make the pill component flexible in the row, it will properly wrap it's text to a new line, but theres only 1 pill per row/each pill fills the entire width of the wrap. If I make it minimum/not flexible, then there's correctly as many pills that can fit on 1 row, but if 1 pill takes up more than the full width, it won't wrap the text to a new line and instead overflow.