Search code examples
htmlcssflexbox

Filling up remaining height with CSS flexbox

I have a scenario as follow, where i have div with content 1, div with content 2, and a image that takes 100% width (height varies). What i want to achieve is to fit div 1 on top, the image on bottom and remaining with content 2. Do note that all 3 should be fit perfectly into the device view.

I know that using flexbox could help me acheiving above, but i am not sure how to implement it.

Note that i am expecting a pure css solution.

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>

enter image description here

Solution

  • You should remove <div style="height: 100%"> to make the flexbox layout to work, otherwise that div would be the only flex item, then set height: 100vh; on <ion-content>.

    Or, set that div as the flex container directly if you can't remove it, again need to define the height too. Another option would be nested flexbox layout but seems it won't be necessary.

    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>