Как обернуть (и уменьшить при необходимости) в макете столбца

В последнее время я столкнулся с проблемой, когда Im пытается создать три столбца, где столбцы будут заполнены динамическим числом div (ящиков) (около 5-15), каждый из которых имеет собственную высоту в соответствии с его содержимым.

Эти divs должны:

1) Положить в столбце.

2) Переходите к следующему столбцу, когда они достигают высоты видового экрана.

3) Когда/если макет достигает трех столбцов и требует обнуления снова - сжимайте все столбцы /divs до по-прежнему и не нарушайте макет

Рисунок ниже иллюстрирует итоги

(Так, например, если # 4 был немного короче, он не обернулся бы в третий столбец, но остался бы вместо # 3)

Пытался решить эту игру с помощью "layout-wrap" и "layout = 'column" с угловым материалом, но при необходимости он не будет сокращать divs по горизонтали. Таким образом, после нескольких оберток, дополнительные divs выпрыгнут из контейнера.

В этой ситуации Flexbox, похоже, терпит неудачу.

Возможно, я мог бы сделать это в функции Link через Angular?

Любые рекомендации или советы будут оценены!