How to do this on flex?

Question

Layout

Tell me how to correctly lay out such a block.

There is a container with a minimum height of 100vh, and there are two blocks in it. The top block is a type of header whose height can change, and the second block also has a dynamic height. It is necessary that the second block occupies the entire remaining height and aligns the elements vertically in the center.

Answer 1

https://jsfiddle.net/bd68az1v/

Answer 2

Bottom align-items : center, justify-content: center

Answer 3

I won’t write a solution, I’ll just leave a link, and you are already looking at what you need html5.by/blog/flexbox is much more interesting.