To make the overflow work correctly you need to position the element you want to do the overflow absolutely. I had the same issue and searched a long time to find this solution. Looks like this is a common behavior when using flex layout.
Here is the relevant change:
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<div style="height: 40rem">content</div>
</section>
</div>
And the changes=d snippet where you can see it work.
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#voolvern_main .voolvern_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.voolvern_gflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a {
text-decoration: none;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.voolvern_grid .voolvern_gridflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#voolvern_main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media (min-width: 40rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 50%;
}
}
@media (min-width: 56rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 32.99999%;
}
}
#voolvern_main>#voolvern_mainaside.voolvern_aside {
-webkit-box-flex: 1;
-ms-flex: 1 1 1rem;
flex: 1 1 1rem;
}
#voolvern_main>#voolvern_rightaside.voolvern_aside {
width: 32%;
}
#voolvern_main>.voolvern_aside>.voolvern_uid {
width: 100%;
}
.voolvern_stackhandler>.voolvern_stackpad {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.voolvern_group.voolvern_nuid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#voolvern_toolbar>.voolvern_group {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span {
padding-top: .8rem;
padding-bottom: .8rem;
padding-right: 1rem;
padding-left: 1rem;
border-radius: 10%;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span:hover {
background: lightgray;
}
.voolvern_stackpad>.voolvern_header>.voolvern_group {
height: 3.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/db35900820.js">
</script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<title>vvnfinal</title>
<link rel="icon" href="https://cdn.dribbble.com/users/1097/screenshots/168079/newv2.png">
</head>
<body class="voolvern_grid">
<main id="voolvern_main" class="voolvern_gridflex" style="flex: 1rem">
<aside id="voolvern_mainaside" class="voolvern_aside voolvern_gridflex">
<section class="voolvern_uid voolvern_stackhandler" style=" flex-direction: column; display: flex">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_mainasideheader" class="voolvern_header">
<div class="voolvern_group voolvern_nuid">
<span>left</span>
<span>left</span>
</div>
</section>
</div>
<!-- end:: header -->
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<!-- here is the div that when givin a height of 40rem+ it cuzes the <section> to push down all the contents after it,
I want the <section> to stay put and is scrollable when that happens but I can't seem to figure that out.
-->
<div style="height: 40rem">content</div>
</section>
</div>
<!-- begin:: toolbar -->
<div class="voolvern_stackpad">
<section id="voolvern_toolbar">
<span class="voolvern_group voolvern_nuid">
<!-- begin:: toolbar items -->
<div class="voolvern_nitem">
<a href="/Projects">
<span class="voolvern_span">
<i class="far fa-lightbulb" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Subsidiaries" class="">
<span class="voolvern_span">
<i class="fab fa-hubspot" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-shopping-bag" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-globe-americas" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fas fa-hands-helping" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fab fa-ioxhost" aria-hidden="true">
</i>
</span>
</a>
</div>
<!-- end:: toolbar itemns-->
</span>
</section>
</div>
<!-- end:: toolbar -->
</section>
</aside>
<aside id="voolvern_rightaside" class="voolvern_aside voolvern_nuid">
<section class="voolvern_uid voolvern_stackhandler" style="overflow-y: scroll">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_rightasideheader" class="voolvern_header">
<div class="voolvern_group"> content header </div>
</section>
</div>
<!-- end:: header -->
</section>
</aside>
</main>
</body>
</html>
