CSSで残りの高さを補充するflexbox

Question

私は次のようなシナリオを持っています。私はコンテンツ1でdiv、コンテンツ2でdiv、そして100％幅（高さが変わります）の画像を持っています。私が達成したいのは、上部にdiv 1を、下部に画像を、コンテンツ2を残してフィットさせることです。すべて3がデバイスビューに完全に収まるように注意してください。

私はフレックスボックスを使用することで上記の恩恵を受けることができますが、実装方法はわかりません。

私は純粋なCSSソリューションを期待しています。

Plunker：Click here

<ion-view title="Welcome"> 
    <ion-content has-header="true" style="display: flex; flex-flow: column;"> 
    <div style="height: 100%"> 
     <div style="background-color: red;"> 
     Content 1 (height based on content) 
     </div> 
     <div style="background-color: blue; flex: 2;"> 
     Content 2 (remaining height) 
     </div> 
     <div> 
     <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" /> 
     </div> 
    </div> 
    </ion-content> 
</ion-view> 

Answer 1

あなたは<ion-content>にheight: 100vh;を設定し、その後、それ以外の場合はそのdiv要素が唯一のフレックスアイテムになり、仕事にフレキシボックスのレイアウトを作成する<div style="height: 100%">を削除する必要があります。

または、divをフレックスコンテナとして直接設定することができない場合は、heightを再度定義する必要があります。別のオプションはネストされたフレックスボックスレイアウトですが、必要ではないようです。

jsFiddle

<ion-view title="Welcome"> 
    <ion-content has-header="true" style="display: flex; flex-flow: column; height: 100vh;"> 
    <div style="background-color: red;"> 
     Content 1 (height based on content) 
    </div> 
    <div style="background-color: blue; flex: 1;"> 
     Content 2 (remaining height) 
    </div> 
    <div> 
     <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" /> 
    </div> 
    </ion-content> 
</ion-view>