How to align flex container items in height?

Question

css

Everything is fine here - https://jsfiddle.net/yw1xazs0/1/
But as soon as content is added to one of the inner blocks, the height of the elements becomes different - https://jsfiddle.net/xdnd9d4c/
How to make them not change until the height of the content in one of the blocks exceeds the allowable height?
Condition: you can not change min-height to height in the container, because on most smartphones in landscape mode there is not enough height to fit all the content in blocks. So height: 150vh will cause each container element to be too small in height

Answer 1

you can't change min-height to height in a container, because on most smartphones in landscape mode there is not enough height to fit all the content in blocks

If you have a solution, then make it, just then make other conditions for the mobile phone (@media), I'm not specifically talking about this case, but in general.

Answer 2

.cont {
height:1px; //<---
min-height: 150vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Need to add height