Changing position relative the other tags in css

I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one’s position has to be fixed. Also if the red one’s height increases, yellow has to move forward to the bottom. How can i do that?

enter image description here

Here is my css and html code:

#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  
</head>
<body>
<!-- Start your code here -->
  
   <div class="parent">
       <div id="div1"></div>
       <div id="div2"></div>
       <div id="div3"></div>
</div>


<!-- End your code here -->
</body>
</html>