Consider the following:
- The blue containers are
inline-flexelements with stylegap: Xto separate the flex items - The green containers are dynamically generated, but are generally of predictable dimensions corresponding to 1, 2, 3... individuals.
I am using inline-flex because I would like both containers to be able to fit on the same line. Due to the potential for a large number of individuals, I need to limit the width or number of flex items in a row by some method. I've tried setting max-width: W on container A. This results in the final item, "Team D" wraps to a second line. However, this results in extra horizontal space that isn't utilized, since the flex row breaks at some width that is less than W.
As an alternative to max-width, I tried a trick to force breaking to a new row in container A, but got a similar result. It appears that container A's width is always calculated to be large enough to fit all of its items in one row.
What technique can I use to achieve a result like the following? I am trying to come up with a good way to display containers A and B where the number of teams and individuals per team is unknown/variable.
