Поместите div с одним элементом рядом с div со многими элементами и при изменении размера окна поместите элемент один под другим

Question

У меня следующая ситуация (посмотрите на изображение ниже)

Я хочу, чтобы кнопка, которая находится одна, была слева, остальные кнопки (которые находятся внутри их собственный div), чтобы быть слева. когда я изменю размер (уменьшая размер окна), я хочу достичь того, что находится в первом изменении размера (одна кнопка опускается), а затем на втором изменении размера двумя кнопками ниже и затем 4 кнопками в столбце в конце.

Я думал о чем-то подобном в css файле:

.aaa {
    text-align: left;
    float: left;
}
.bbb {
    float: left;
}

.ccc {
    float: left;
}

, но после первого изменения размера кнопка только с className = "bbb" остается в этой строке, а Button1,2 и 3 идут ниже первого один, так это как:

Answer 1

На самом деле я сделал что-то подобное (и этого мне достаточно):

.aaa {
    text-align: left;
    overflow: hidden;
    width: 100%;
}

.bbb {
    float: left;
}

Так что полностью игнорируем класс "ccc".

Answer 2

Вы можете попытаться использовать display: flex, но это не даст именно то, что вы хотите.

См. Пример ниже:

.aaa {
  display: flex;
  width: 100%;
}

.bbb {
  flex: 0;
}



.ccc {
  display: inline-block;
  flex: 1;
}

<div class="aaa">
  <button class="bbb">Button</button>
  <div class="ccc">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</div>