I have made a guess on what you need and made this using flex-direction: column and flex-grow: 1.

jsfiddle.net/dinodev/9m1yLzvs/5

If you dont want the page to be scrollable, there‘s no way to display 3 elements if 2 of them already take up the whole size of the page.

There are 2 Solutions. Either you scroll, then both divs can be 50vh or you use the following css, wich makes the divs 50vh – the height of the button / 2.

Note that also the margin / padding of all elements needs to be removed or added to the calculaction to prevent an overflow. For padding, you can also set box-sizing: border-box, so that the padding will be included in the normal height of the element and doesnt need to be added to the calculation.)

Here‘s an example:

* {
    margin: 0;
    padding: 0;
}
#top {
    background-color: red;
}
#bottom {
    background-color: blue
}
button {
    height: 20px;
}
div {
    height: calc(50vh - 10px)
}

<div id='top'>
    <h1>Test</h1>
    <input id='testInputOne' type='text'>
</div>
<button id='testButton' type='button'>Test</button>
<div id='bottom'>
    <input id='testInputTwo' type='text'>
    <h1>Test</h1>
</div>

Hope that helps

Here are two solutions even I don’ really understand your goal.

CSS :

    html, body{
        margin:0px;
    }
    h1{
        margin:0px;
        padding:10px;
        border:none;
    }
    #top {
        background-color: red;
        height:50vh;
        /* min-height:100px; 
        solution 1 if You remove the #mainContainer div
        and uncomment min-height*/
    }
    #bottom {
        background-color: blue;
        height:50vh;
        /* min-height:100px; 
        solution 1 if You remove the #mainContainer div
        and uncomment min-height*/
    }
    #mainContainer{
        display:grid;
        grid-template-rows: repeat(2,50vh);
        /* Solution 2 : use the main container div
        use the display:grid
        Solution 2 is used by default here*/
    }

HTML :

    <div id="mainContainer">
        <div id="top">
            <h1>Test</h1>
            <input id="testInputOne" type="text">
        </div>

        <div id="bottom">
            <h1>Test</h1>
            <input id="testInputTwo" type="text">
        </div>
    </div>

I have two divs that should take whole page while each one is 50% of the page (50vh) but once I apply that the resizing goes crazy and elements overlap when the size becomes smaller and smaller, any workaround? I would like to achieve the typical disappearing of whole page that it gets removed from viewport, not overlapping.

#top {
  background-color: red;
}

#bottom {
  background-color: blue;
}

div {
  height: 50vh;
}

<div id='top'>
  <h1>Test</h1>
  <input id='testInputOne' type='text'>
</div>
<button id='testButton' type='button'>Test</button>
<div id='bottom'>
  <input id='testInputTwo' type='text'>
  <h1>Test</h1>
</div>

https://jsfiddle.net/tr40z716/

I tried to add one more div that would hold the two divs but no help.