Div scrolling, with parent - html

Question

I have a div. And this div contains a very long list. This list becomes scrollable automatically.
This div is then inside another div, which fills out the entire screen.
Scrolling works fine, but it only works when the mouse is over the inner div, the one that actually contains all the data.
But I want scrolling to work, also when the mouse is over the parent div, the one that fills out the entire screen.
How do I do that?
You can see the sample here:
https://openage.org/fs/jsl_forritun/?page=hlutir
It doesn't scroll when the mouse is over the darker part. /:

Answer 1

you have two divs that contains your content body
id= "nhreyfing"
give him this style padding: 0 20vw; background: black
or what so ever padding you wanna give him
id= "content"
give him your rgb(213, 191, 134) background

Answer 2

* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B2832;
}
.main {
margin: 0 auto;
padding: 40px;
width: 700px;
height: 100vh;
overflow-y: auto;
background: #D5BF86;
}
.main ul {
margin: 0;
padding: 0;
}
.main ul li {
list-style: none;
}
.main ul li:nth-child(n+2) {
margin: 10px 0 0;
}
.main ul li a {
padding: 10px;
display: flex;
color: #000;
background: #C6B076;
text-decoration: none;
}
<div class="main">
<ul>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>

Answer 3

Do the following:
remove CSS properties from
BODY element {height:100%}
remove {max-width: 800px} and add CSS to id="initial_screen_base" element:
div#initial_screen_base {
max-width: 100vw;
padding: 0px 20vw;
background-color: rgb(43, 40, 50);
}
if you want it to me maxed always to 800px (for smaller devices it will be full width), make it like this:
div#initial_screen_base {
background-color: rgb(43, 40, 50);
max-width: 100vw;
padding: 0;
padding-right: calc((100% - 800px)/2);
padding-left: calc((100% - 800px)/2);
}
for your id="node":
div#node {
background-color: rgb(213, 191, 134);
}
You should remove you inline CSS and put them in a style TAG inside your HEAD. That way you will fave more clear code for yourself to edit.