Restliche Höhe mit CSS-Flexbox füllen

Question

Ich habe ein Szenario wie folgt, wo ich div mit Inhalt 1, div mit Inhalt 2 und ein Bild, das 100% Breite (Höhe variiert) hat. Was ich erreichen möchte, ist div 1 auf der Oberseite, das Bild auf der Unterseite und bleib mit Inhalt 2. Beachten Sie, dass alle 3 sollte perfekt in die Gerätesicht passen.

Ich weiß, dass die Verwendung von Flexbox mir helfen kann, oben zu erreichen, aber ich bin mir nicht sicher, wie ich es implementieren soll.

Beachten Sie, dass ich eine reine CSS-Lösung erwarte.

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

Sie <div style="height: 100%"> entfernen sollte die Flexbox Layout zu arbeiten, sonst, dass div flex Element der einzige wäre zu machen, stellen Sie dann height: 100vh; auf <ion-content>.

Oder setzen Sie das div als Flex-Container direkt, wenn Sie es nicht entfernen können, müssen Sie auch die height definieren. Eine andere Option wäre das geschachtelte Flexbox-Layout, aber es scheint, dass es nicht notwendig sein wird.

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>