Позиционирование абсолютного элемента полной высоты внутри относительно одного

Question

Пожалуйста, помогите мне решить квест. У нас есть 3 div-блока. Высота первого div равна 100px (но в реальном мире это динамическое значение). Второй блок имеет фиксированную высоту и имеет еще один блок в качестве дочернего элемента. Детский блок должен иметь высоту, растянутую до нижней части экрана. Но поскольку наш второй блок относительный, дно: 0 будет означать нижнюю часть второго блока. Какова наилучшая практика для таких случаев, чистый CSS, пожалуйста?

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 

 
.second div { 
 
    position: absolute; 
 
    background: pink; 
 
    width: 50%; 
 
    height: 200px; 
 
    top: 100px; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>

UPD:

можно достичь эффекта путем обертывания второй DIV в дополнительный DIV (ширина позиции абсолютного и снизу: 0) и оставить его с прозрачным фоном, но тогда статическое содержание «за ним» становится непригодным. Вот an example.

Answer 1

Это основано на вашей скрипке обновления, так как это не так ясно, что вы хотите достичь, но вы упомянули этот пример был близок, я сделал свою ссылку, чтобы быть выше z-index так что кликабельны:

Check external Fiddle, embedded seems to break bottom

Answer 2

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background-color: lightgreen; 
 
    top: 100px; 
 
} 
 

 
.second >div { 
 
    background: pink; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>