[SOLVED] Make main content and sidebar divs of equal height.

Question

I have used flexbox in my page.
The page contains 4 sections:
1. Header
2. Main Content
3. Sidebar
4. Footer

I have arranged them in the page using flexbox.
Header occupies 100% width, main content + Sidebar = 100% and footer = 100%.
Everything is ok right here.

My requirement is I need the equal height of section and aside contents, that is also there.
But what I actually want is the height of Sidebar should be equal to the height of main div.

This is still confusing point.
Example: here in this code, it keeps blank space at the bottom to make both divs of equal height. But it should consider the height of <section> and apply the same height to the sidebar also. If the height of Sidebar goes longer than .main content, the sidebar should be vertically scrollable.

So, to make the code work in all situations, I am dynamically adding some content to both divs in certain time interval. So, it should be updating the height when the content is added or removed.

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

Answer 1

This should work fine.

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

Answer 2

Nitin Kushwaha Thank You so much...