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

Question

[nismachny]

Всем доброго времени суток! Помогите пожалуйста разобраться в проблеме.

Есть flex родитель, в котором расположены 5 элементов.
Нужно чтобы первый занимал 2 строки, а остальные выравнивались по flex-wrap. Порядок расположения на картинке.


Знаю, пахнет гридами, но очень хочется реализовать на флексах))

Заранее спасибо!

Структура следующая:

Comments

[Denis Melnikov]

ну так тут просто 2 дива , внутри второго остальные 4 элемента.
Но верно, гриды тут лучше =)

[Ankhena]

Флексы так могут при единственном условии: вы жестко зададите высоту.

Знаю, пахнет гридами, но очень хочется реализовать на флексах))

Можете на флоатах еще. Можете, но это сарказм, если что.

Answer 1

[Антон Антон]

https://jsfiddle.net/2vbf3t0x/4/

если в одном контейнере, то нужно ограничить высоту (хотя 100% можно добиться тоже): https://jsfiddle.net/mqyjpch8/1/

Comments

[nismachny]

nismachny, Фальстарт))
Обратил внимание, что элементы находятся в разных контейнерах.

[Антон Антон]

nismachny, тогда только гриды. да и изначально не было такого условия
флексами 4 и 5 под 1 будут

[Антон Антон]

nismachny, есть такой вариант: https://jsfiddle.net/mqyjpch8/1/ но тут с отступами много геморроев