Правильная калибровка и выравнивание гибких элементов (ов) в последней строке

Скажем, у меня есть список пользователей, и каждый пользователь прикреплен к нему. Каждый пользователь указан так:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

Все они оформлены с помощью:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

Вот пример этого в действии:

Хорошо, все в порядке, список пользователей может быть довольно длинным, поэтому здесь важна компактность. Моя проблема в том, что этот правый край ужасно непоследовательный, поэтому мне интересно, есть ли способ улучшить это.

Моя первая мысль, конечно, заключалась в том, чтобы установить фиксированную ширину на пролетах. Однако ширина имени пользователя не является точно прогнозируемой. У вас может быть кто-то по имени iiiii, а кто-то называется WWWWW, но поскольку это не моноширинный шрифт, вы получаете "iiiii" и "WWWWW", там очень четко различаются ширины. Таким образом, "максимальная ширина" будет в основном быть максимально разрешенным символом, который равен W, умноженному на максимальную длину имени пользователя. Попробуем это...

Еа. Я мог бы также использовать <ul>, если это результат, который я собираюсь получить. Следующей мыслью было, может быть, что-то, связанное с display:table, чтобы ширина была согласованной по столбцам, но все еще оставалась динамичной и - при условии, что большинство людей имеют разумные имена пользователей (* cough *... oh hey, так что, как вы избегаете Markdown... huh...) - но он, как правило, заканчивается большим количеством пустого пространства.

Итак, моя текущая идея - это нечто вроде выравнивания выравнивания. Это хорошо работает для текста, не так ли? Но, увы, text-align: justify делает в этом случае всевозможные ошибки, возможно потому, что между искомыми элементами нет пробелов.

Моя последняя попытка заключалась в использовании flexbox, что я уже использую для хорошего эффекта в новом дизайне сайта. Посмотрите, как он выглядит с display: flex; flex-wrap: wrap; на контейнере, а flex: 1 0 auto; - на элементах...

Да, это выглядит не так уж плохо. Не так уж плохо в al -

... Hm. Так близко. Мне бы очень хотелось, чтобы последняя строка элементов не растягивалась по всей длине. Это нормально, когда там три или четыре на последней строке, но два выглядят немного глупо, и только один заполняет всю ширину и выглядит смешно.

Итак, я думаю, что все это маленькое приключение сводится к одному простому вопросу:

Как я могу достичь поведения с выравниванием по выравниванию, в котором элементы расположены на расстоянии от полной ширины контейнера, за исключением последней строки, где они должны использовать свою естественную ширину?

Чтобы завершить эту маленькую историю, спасибо @Michael_B ответ, вот как я реализовал решение:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

И результат:

Красивая.

Ответ 1