Quando você usa o flexbox wrap para criar uma grade e possui uma última linha com menos elementos que as linhas anteriores, o comportamento padrão dos elementos "órfãos" comflex: 1 é esticar horizontalmente para preencher a largura - tornando os elementos maiores que as linhas anteriores. Quero o mesmo comportamento, exceto que os itens maiores apareçam na linha superior e não na linha inferior.

Eu vim com uma solução (mostrada abaixo), mas ela não escala bem e parece um hack ruim. Existe uma maneira melhor (mais elegante) de obter esse layout? A solução precisa lidar com conteúdo dinâmico; ou seja, não saberei o número de elementos de antemão e preciso manter a ordem de origem.

Deve ficar assim:

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li:nth-child(1) {order: 30}
ul#subcategory_list li:nth-child(2) {order: 29}
ul#subcategory_list li:nth-child(3) {order: 28}
ul#subcategory_list li:nth-child(4) {order: 27}
ul#subcategory_list li:nth-child(5) {order: 26}
ul#subcategory_list li:nth-child(6) {order: 25}
ul#subcategory_list li:nth-child(7) {order: 24}
ul#subcategory_list li:nth-child(8) {order: 23}
ul#subcategory_list li:nth-child(9) {order: 22}
ul#subcategory_list li:nth-child(10) {order: 21}
ul#subcategory_list li:nth-child(11) {order: 20}
ul#subcategory_list li:nth-child(12) {order: 19}
ul#subcategory_list li:nth-child(13) {order: 18}
ul#subcategory_list li:nth-child(14) {order: 17}
ul#subcategory_list li:nth-child(15) {order: 16}
ul#subcategory_list li:nth-child(16) {order: 15}
ul#subcategory_list li:nth-child(17) {order: 14}
ul#subcategory_list li:nth-child(18) {order: 13}
ul#subcategory_list li:nth-child(19) {order: 12}
ul#subcategory_list li:nth-child(20) {order: 11}
ul#subcategory_list li:nth-child(21) {order: 10}
ul#subcategory_list li:nth-child(22) {order: 9}
ul#subcategory_list li:nth-child(23) {order: 8}
ul#subcategory_list li:nth-child(24) {order: 7}
ul#subcategory_list li:nth-child(25) {order: 6}
ul#subcategory_list li:nth-child(26) {order: 5}
ul#subcategory_list li:nth-child(27) {order: 4}
ul#subcategory_list li:nth-child(28) {order: 3}
ul#subcategory_list li:nth-child(29) {order: 2}
ul#subcategory_list li:nth-child(30) {order: 1}