So I have below piece of code and wanted to achieve two scrolling containers with div#parent contained ad 75vh
But what I get is stretched parent to fit the sidebar and content.
I don’t understand why its happening as i have added overflow for both elements.
Could somebody point me in the right direction.
<code><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>
</code>
<code><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>
</code>
<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>
Thanks in advance for help