JS / CSS адаптивный переход от «заливки из центра» к «стыковке и переносу» на краю окна

Question

У меня довольно сложная проблема с пользовательским интерфейсом (по крайней мере, с моими знаниями), и мне интересно, есть ли у кого-нибудь идея помочь мне. Основа c может быть получена из этого примера:

.level-0 {
  background-color: blue;
  width: 100%;
  height: 50px;
  display: flex;
}

.level-1 {
  flex-grow: 1;
  position: relative;
  background-color: red;
  margin: 3px;
}

.level-2 {
  display: flex;
  flex-direction: row;

  position: absolute;
  background-color: yellow;
  top: 30px;
}

.level-3 {
  width: 40px;
  height: 40px;
  margin: 3px;
  background-color: green;

}

<div class="level-0">
  <div class="level-1"></div>
  <div class="level-1"></div>
  <div class="level-1">
    <div class="level-2">
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3"></div>
      <div class="level-3"></div>
    </div>
  </div>
</div>

https://jsfiddle.net/Lgea8yqp/

У меня есть 4 уровня делений со следующими основами c css для визуализации настройка.

Контекст:

• сценарий использования основан на том факте, что может быть произвольное количество элементов уровня 3 на элемент уровня 2
• всегда существует ровно 1 элемент уровня 0
• количество элементов уровня 1 может варьироваться
• каждый элемент уровня 1 имеет ровно 1 элемент уровня 2
• Элементы уровня 3 показаны взаимоисключающими для каждого уровня 2, поэтому я добавил только некоторые для одного элемента уровня 2 в скрипте

Оптимальный результат будет следующим:

• заполните элементы уровня 3 под соответствующим элементом уровня 1 и сохраняйте список элементов уровня 3 в центре элемента 1-го уровня, пока он не будет go вне области просмотра
• если это будет go из области просмотра, ограничение центрирования может быть нарушено, чтобы заполнить до левой / правой scr Достигнут край, пока вся «строка не будет завершена» (т. е. ни один элемент уровня 3 не может быть добавлен без выхода из области просмотра
• , после чего начинается перенос во вторую строку, начинающуюся с левого окна просмотра - edge

Разрешено:

• jquery
• изменение иерархии, за исключением уровня 0
• добавление / удаление контейнеров
• как правило, изменения CSS, включая тип позиционирования (я не совсем уверен в этом, так как невозможно представить, что кто-то может придумать в ответе, который нарушает требование, которое я даже не знал, у меня неявно было )

Любая помощь приветствуется, не стесняйтесь задавать вопросы, если я не был достаточно точен (или измените название, так как мне было трудно его найти).