I want the green box to wrap around the red boxes, and not expand to the full-width, Automatically.
If there is only one red block inside the green block, the green one will wrap automatically.
If there are only two red blocks inside the green block, the green one will wrap automatically. Go ahead and edit your demo to see this in action – everything works as expected.
there must be a css solution.
There is. Media queries.
using width / max-width is something I did before you suggested it, but it’s not the intended outcome, because obviously I won’t have the resolution of every page viewer.
You can define different widths/max-widths (wrapping thresholds, if you will) inside media queries, depending on how many red blocks you want to appear along a row at different screen sizes.