Элемент позиции внизу с высотой заполнения предшествующего элемента

Question

Первый div должен заполнить оставшуюся оставшуюся высоту, а второй div должен располагаться внизу с начальной высотой.

DEMO:

.container { 
 
    width: 240px; 
 
    height: 400px; 
 
    background: #E0E0E0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.first { 
 
    border :1px solid black; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.second { 
 
    border: 1px solid blue; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
<div class="first"> 
 
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE 
 
</div> 
 
<div class="second"> 
 
<div> 
 
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT 
 
</div> 
 

 
</div>

Answer 1

Ответ на этот вопрос будет варьироваться от разметки разметки, но в вашем случае вы можете просто добавить это к вашему first элементу:

height: 100%;

Это работает из-за ваш flex отобразить свойство контейнера. Другое свойство контейнера, вероятно, потребует другого решения.

Demo

Полный код

.container { 
 
    width: 240px; 
 
    height: 400px; 
 
    background: #E0E0E0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.first { 
 
    height: 100%; 
 
    border :1px solid black; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.second { 
 
    border: 1px solid blue; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
<div class="first"> 
 
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE 
 
</div> 
 
<div class="second"> 
 
<div> 
 
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT 
 
</div> 
 
</div>

Answer 2

Вам нужно сделать высоту авто в контейнер класс так зависит от длины струны вашей высоты увеличение.

<style> 
 
.container { 
 
    width: 240px; 
 
    height: auto; 
 
    background: #E0E0E0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.first { 
 
    border :1px solid black; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.second { 
 
    border: 1px solid blue; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 
</style> 
 
<div class="container"> 
 
<div class="first"> 
 
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE 
 
</div> 
 
<div class="second"> 
 
<div> 
 
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT 
 
</div> 
 

 
</div>