So I have the below piece of code and wanted to achieve two scrolling containers with div#parent contained ad 75vhBut what I get is a stretched parent to fit the sidebar and content.I don't understand why this is happening as I have added overflow for both elements.
Could somebody point me in the right direction?
<body><div id="parent" style="display: flex; max-height: 75vh; min-height: 30vh; width: 75vh; background-color: beige;"><div style="display: flex; flex-direction: column; flex-grow: 1;"><div><p>Head</p></div><div style="display: flex;"><div id="nav" style="width: 250px; background-color: aquamarine;"><div style="display: flex; flex-direction: column; overflow-y: auto; min-height: 0px;"><p style="height: 800px; background-color: blueviolet;">asdasd</p></div><button>asdasd</button></div><div id="content" style="flex-grow: 1; background-color: aliceblue; overflow-y: scroll;"><p style="height: 1800px; background-color: brown;">main</p></div></div><div style="background-color: darkgrey;"> footer</div></div></div></body>