Decrease height like behavior of div without messing layout of child elements

I have this a parent div which has a fixed position and also a child div which has a fixed position (can be changed) and has text inside. This child text is centered from the parent div.

I want to create a behavior by changing some CSS where when the parent div "height" is decreased, the child div with the text stays the same position and won't show if the parent div doesn't cover it.

The below snippet shows my current layout.

#parent {
  position:fixed;
  background:red;
  width:100vw;
  height:100vh;
}

#child { 
  color:black;
  font-family:Arial;
  position:fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

<div id="parent">
  <div id="child">
    <h1>
      TEST
    </h1>
  </div>
</div>

What I wish to happen by changing some CSS is like this:

http://ift.tt/28MP1Df

Say when the magic value is around 50%, it should only show the area which is highlight in a yellow border WITH THE TEXT CUTTING OUT (this is important).