どのように1つのDIVを親DIV内の残りの垂直スペースを埋めるようにする

Question

ビューポートを埋めるdivがあります（幅は100％、高さは100vhです）。

divの内部には、バナー画像（幅は100％、高さは自動的に幅に合わせてサイズが変更されないように設定されています）と別のdivです。

内側のdivが残りの垂直スペースを埋めるようにします。幅は簡単です。私はちょうど幅を100％に設定しました。しかし、残りの垂直スペースの100％を埋めるようにdivを伸ばしたいと思っています。

私が読んだところでは、フレックスボックスがそうすることができたようですが、動作させることができませんでした。

ヘルプ？

Answer 1

削ぎ落としたHTMLは次のようになります。

<div id="flex-container"> 
    <img src="banner.png" /> 
    <div id="flex-item">Text or whatever</div> 
</div> 

は、ここでは、この作品を作っているCSSです：

.flex-container { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-content: center; 
    align-items: flex-start; 
} 
.flex-item { 
    position: relative; 
    width: 100%; 
    order: 0; 
    flex: 1 1 auto; 
    align-self: stretch; 
} 

はFYI、それはテスト環境で素晴らしい仕事が、私は適用されたときそれは私の仕事のデザインにはまだ垂直に伸びていませんでした。私を踏みにじっていたものが私の.flex-item divはポジションだったことがわかりました：絶対。それをポジションに変更する：相対はデザインに悪影響を与えませんでしたので、問題は解決しました。