title: css absolute position on top of another div
body: <ul>
  <li>I have wrapper orange div that has known height, e.g. 200px.</li>
  <li>I have bottom red div that has unknown height, e.g. textarea that can be resizable depending on text inside.</li>
  <li>The rest space besides div is taken by a blue div, that has a scroll.</li>
  <li>Well <strong>I want to place an absolute green div right above of the red div</strong>. I don't know its height. This div should have z-index more than the blue div, and be on its bottom. </li>
  </ul>
  
  <p>Well:</p>
  
  <ul>
  <li>I can't use <code>bottom: Npx</code> and place green div in the same container as the red div. since I don't know the size of red div and.</li>
  <li>I can't use <code>top: Npx</code> 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.</li>
  <li>I can't place it inside of blue div and make it <code>bottom: 0</code>, since it has a scroll.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
   &lt;div class="top-bellow"&gt;
   &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
    &lt;div class="unkown-height-top"&gt;&lt;/div&gt;
    &lt;div class="unkown-height-bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>