How to set sizes from the sizes of a parent that doesn't have them yet?

Question

css

css is not easy for me and therefore I elevated its study to the rank of a hobby. Here is the problematic code on codepen , which in words can be described something like this - there is a container (.container) with a width of 100% and a height of auto, since it should be what the children will set it to. The main container has two containers left and right (.left, .right), each has a width of 50%, the height of the first-left is inherit, the second is 50px.
The first question is why the first-left container is not visible? Is it because the .container doesn't have a height yet when it is formed, which is set only by the second-right child?
The second question is how to make this scheme work under such conditions?

Answer 1

height: inherit will not work if the parent does not have a height rule set - for example, set the parent to height: 300px, then .left will also become 300px