How is the height of flex items calculated?

Question

css

Hello.
There is such an example https://jsfiddle.net/vLw6jh5x/
In the first case, all flex items take the height of the parent due to the align-items: stretch property;
In the second case, the height: 100% property is applied to them. It would seem that the result should be identical to the first one, but instead the height equals the content. Why is this happening?

Answer 1

the height: 100% property only works for nested elements with a parent of a given height, otherwise it just doesn't work. Actually, for this, in particular, they use flex.