Как на FlexBox сдеать растягивание по поперечной оси?

Question

[vasa666]

Есть макет представленный на картинке, не получается растянуть первый блок в ширину,
как сделать подобное на flexbox? Например в теге "Table" есть такие атрибуты как "colspan" "rowspan" которые позволяют тянуть таблицу как в ширину так и в высоту. А у flexbox есть только "flex-grow" который тянет блок только в ширину.. а как на счет высоты?))

Задача не выделять первый блок отдельно в div, а сделать подобную схему как на картинке, именно по средствам для приведенного HTML кода.
- Ширина блоков (от 2 до 7) 50% от общего контейнера
- Высота блоков по сути плавающая (зависит от наполнения контентом)
codepen.io/vasa666/pen/jymGMV

Answer 1

[Valentyn Fetisov]

По идее { align-items: stretch; } это свойство отвечает по растягиванию блока по наполнению, возможны разные варианты, попробуйте поэкспериментировать с align-items задавая ему разные значения.

Comments

[vasa666]

Если бы было все так просто, яб не рисовал нужную схему в фотошопе, и не выкладывал бы рабочий пример на "codepen.io" для наглядного отображения ситуации, а просто дописал бы ваше решение в код CSS))
Если вы обратили внимание, в примере и так блоки тянутся по ширине) проблема в том что нужно растянуть первый блок с перекрытием второй строчки.. так как это могострочная структура " flex-wrap: wrap; "

[vasa666]

По сути нужно придумать как сделать "flex-grow" только не для горизонтали, а для вертикали.