Как установить html элементам одинаковую относительную высоту?

Question

[sergiyk0]

Приветствую.

jsfiddle.net/atpqt1jb/1
Есть ли возможность сделать одинаковую высоту красным и зеленым блокам? То есть, чтобы все зеленые растягивались по максимальной высоте зеленого блока, красные - по красного. Сейчас я это делаю через JS, может это можно сделать через flexbox ну или другими средствами CSS?
Спасибо.

Answer 1

[Иван Старков]

Если ul li не принципиально - то используйте тупо table tr td
Если принципиально то см css display: table, table-row, table-cell
(по три li оборачиваете неприниципиальным тегом например div style="display:table-row", сама li table-cell ul в table)

Comments

[sergiyk0]

Получается так jsfiddle.net/atpqt1jb/2 ? Так не работает. Я пробовал делать с table-(row|cell), и с ними можно добиться нужного эффекта, но у .a1 и .a2 получаются разные родители (они будут в отдельных "строках" table-row) jsfiddle.net/h0wmu7g8 . Мне важно, чтобы у .a1 и .a2 (зеленый и красный блок на примере) был один общий родитель (тут на примере это тег li).

[Иван Старков]

sergiyk0: я и предлагал как второй ваш вариант - если надо общий родитель то вот вариант на flexbox
codepen.io/anon/pen/XJdNBg