css absolute position on top of another div

Question

• I have wrapper orange div that has known height, e.g. 200px.
• I have bottom red div that has unknown height, e.g. textarea that can be resizable depending on text inside.
• The rest space besides div is taken by a blue div, that has a scroll.
• Well I want to place an absolute green div right above of the red div. I don't know its height. This div should have z-index more than the blue div, and be on its bottom.

Well:

• I can't use bottom: Npx and place green div in the same container as the red div. since I don't know the size of red div and.
• I can't use top: Npx and place in the same container as orange div, since the known height of 200px of wrapper (orange div) can be shrunken if device height is lesser than 200px.
• I can't place it inside of blue div and make it bottom: 0, since it has a scroll.

.wrapper {
background-color: #ff8000;
 height: 150px;
 display: flex;
 position: relative;
 padding: 10px;
 flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: calc(100% - 20px);
bottom: 40px; /* I don't know the size of bottom div here */
 height: 50px; /* random*/

}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
}

.top-bellow {
  flex-shrink: 1;
 overflow-y: scroll;
 background-color: blue;
}

<div class="wrapper">
 <div class="top-bellow">
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  <div class="unkown-height-top"></div>
  <div class="unkown-height-bottom"></div>
</div>

Answer 1

You can place it inside the red div and use bottom:100%

.wrapper {
background-color: #ff8000;
 height: 150px;
 display: flex;
 padding: 10px;
 flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: 100%;
bottom: 100%;
 height: 50px; /* random*/

}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
 position: relative;
}

.top-bellow {
  flex-shrink: 1;
 overflow-y: scroll;
 background-color: blue;
}

<div class="wrapper">
 <div class="top-bellow">
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  
  <div class="unkown-height-bottom">
    <div class="unkown-height-top"></div>
  </div>
</div>