Заполнение оставшейся высоты с помощью CSS flexbox

Question

У меня есть следующий сценарий: у меня есть div с контентом 1, div с контентом 2 и изображение, которое занимает 100% ширину (высота меняется). То, что я хочу достичь, - это подогнать div 1 сверху, изображение снизу и остальное с содержимым 2. Обратите внимание, что все 3 должны идеально вписываться в представление устройства.

Я знаю, что использование flexbox могло бы помочь мне подняться выше, но я не уверен, как его реализовать.

Обратите внимание, что я ожидаю чистого решения 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

Вы должны удалить <div style="height: 100%"> сделать макет Flexbox работать, в противном случае, что DIV будет только сгибать элемент, затем установите height: 100vh; на <ion-content>.

Или, установите этот div как контейнер гибкого контейнера, если вы не можете его удалить, снова необходимо определить height. Другой вариант - это вложенный макет flexbox, но, похоже, он не понадобится.

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>