Как рассчитывается высота flex-элементов?

Question

[r_g_b_a]

Здравствуйте.
Есть такой пример https://jsfiddle.net/vLw6jh5x/
В первом случае все flex-элементы занимают высоту родителя благодаря свойству align-items: stretch;
Во втором случае к ним применяется свойство height: 100%. Казалось бы, результат должен быть идентичен первому, но вместо этого высота равняется содержимому. Почему так происходит?

Comments

[Stimulate]

https://jsfiddle.net/6238wgpL/ так понятно?

Answer 1

[ThunderCat]

свойство height: 100% работает только для вложенных элементов с парентом с заданной высотой, в остальных случаях оно просто не работает. Собственно для этого в частности и используют флекс.

Comments

[r_g_b_a]

Но если в моем втором примере оно не работает, то результат должен быть идентичным первому примеру.