I am adjusting a suggestions box on a website which shows up when using the search function. It can display a maximum of 12 suggestions but depending on the search it can show 1, 2, 3, 4 etc at a time.

I am experiencing a gap I would like to resolve on the right of these suggestions when they break to a new line.

I am using flex and flex-wrap so when the elements hit the right edge it goes onto the next line and it being responsive depending on screen size. However there is always a gap on the furthest right when elements do break to the next line.

Right space when line breaks

So I thought of using justify-content: space-around/space-between/space-evenly which does a great job of sorting this gap out but only if the suggestions go down another level. If there are less suggestions, there is a massive gap between them to fill out the available space.

Less elements fill out all available space
More elements sit nicer

So what I am trying to do is make the elements left align but not have the gap on the right when it breaks to a new line.

Please could anyone assist and if I would need to supply more information as this is my first question.