Modal opening at bottom of longer pages, not top - html

Question

I have a relatively simple modal (i've dumbed down the content for this question) which is made of an overlay, a modal container and then the modal itself.
It works as expected except for the fact that on longer pages that need to be scrolled through, it shows at the bottom of the page. I've altered the CSS several times to no avail
How can I make it so that this modal opens at the top area of the page no matter what?
.modal-vue {
display: block;
}
.modal-vue .overlay {
text-align: center;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal-vue .modal {
position: relative;
width: 80%;
z-index: 9999;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
margin-top: -20%;
}
.modal-vue .close {
position: absolute;
top: 10px;
right: 10px;
}
<div style="height:1200px;">
</div>
<div class="modal-vue">
<!-- overlay to help with readability of modal -->
<div class="overlay"></div>
<!-- Modal for detail on table cell click event -->
<div class="modal">
<button class="close">x</button>
<div class="uk-grid">
<!-- Starting real modal body for iteration now -->
<div class="uk-width-5-10" style="margin-bottom:60px;">
<div class="md-card">
<div class="md-card-toolbar">
TEST
</div>
</div>
</div>
<!--end modal-->
</div>
<!--end modal overlay-->
</div>
<!--end modal-vue-->

Answer 1

HTML:
<div style="height:1200px;">
</div>
<div class="overlay" >
<div class="modal-vue" >
<!-- overlay to help with readability of modal -->
<!-- Modal for detail on table cell click event -->
<div class="modal">
<button class="close" >x</button>
<div class="uk-grid">
<!-- Starting real modal body for iteration now -->
<div class="uk-width-5-10" style="margin-bottom:60px;">
<div class="md-card">
<div class="md-card-toolbar">
TEST
</div>
</div>
</div>
<!--end modal-->
</div>
<!--end modal overlay-->
</div>
<!--end modal-vue-->
</div>
CSS:
body{
margin:0;
}
.modal-vue{
display: flex;
justify-content:start;
height:100vh;
align-items:start;
}
.modal-vue .overlay {
text-align: center;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal-vue .modal {
position: relative;
width: 80%;
z-index: 9999;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
margin-top:2rem;
}
.modal-vue .close{
position: absolute;
top: 10px;
right: 10px;
}
Link to jsfiddle -> http://jsfiddle.net/Markov88/u9eq2oh3/23/