My child Div Cannot scroll to the bottom

I'm a beginner in HTML and CSS and I've encountered a problem.

I tried to look for some solutions, but I still cannot manage to fix my problem.

My child Div(child of the midtop div) cannot be scrolled to the bottom, which makes the last submit button invisible if I add more tables to it.

I'm not really sure what is the root cause of the problem.

The structure of my divs look like this:

wrapper

header

midtop

firstQ

Thanks in advance.

Here is the link to my code:

https://github.com/erictaur/Course-Query/blob/test-branch/InnoServ/Entry.html

https://github.com/erictaur/Course-Query/blob/test-branch/InnoServ/entrycss.css

Part of my code looks like this

.wrapper {
display: block;
}

#header {
margin: auto;
position: relative;
width: 100%;
height: 200px;
background-color: grey;
transform: translate(-50%, 0%);
left: 50%;
top: 0%;
display: block;
}

#midtop {
margin: auto;
position: relative;
width: 100%;
transform: translate(-50%, 0%);
height: 600px;
left: 50%;
overflow: auto;
display: inline-block;
}

#firstQ {
margin: auto;
width: 80%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
display: inline-block;
}