How to set height of main-container div with response to nested div elements?

Question

I have made two div elements placed next to each other with in a main-container div.
Height of both div is set to auto. How can i set height of main-container div so it gets adjust as per the height of both div elements inside it and footer element after it is placed at bottom of page.
Please Help

https://code.sololearn.com/W9DRJcX2Afr0/?ref=app

Answer 1

min-height

https://code.sololearn.com/WrCC2w0Wmk4l/?ref=app

https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 2

If i am adding height or minimum height to main-container, the footer is still getting placed below div2 on right side in bigger screens (0.5 size in codepen)☹

https://codepen.io/gpriya155/pen/yLNOQpL