абсолютная позиция css поверх другого div

Question

• У меня есть оранжевый div-обертка с известной высотой, например, 200 пикселей.
• У меня есть нижний красный div с неизвестной высотой, например, текстовая область, размер которой можно изменять в зависимости от текста внутри.
• Остальное пространство, кроме div, занято голубым div, у которого есть свиток.
• Ну Я хочу поместить абсолютный зеленый div прямо над красным div .Я не знаю его высоты.Этот div должен иметь z-index больше, чем синий div, и находиться на его дне.

Ну:

• Я не могу использовать bottom: Npx и поместить зеленый div в тот же контейнер, что и красный div.так как я не знаю размер красного div и.
• я не могу использовать top: Npx и поместить в тот же контейнер, что и оранжевый div, так как известная высота 200px обертки (оранжевый div) можетбыть уменьшенным, если высота устройства меньше, чем 200px.
• Я не могу поместить его в синий div и сделать его bottom: 0, так как у него есть свиток.

.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

Вы можете поместить его в красный div и использовать 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>