stackdisplay stackdisplay - 5 months ago 27
CSS Question

Splitting flex container into equal width part

I am trying to split content 2 into 2 equal width div that fill the whole content 2 height but fail in doing so. How could it be acheive?

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;">
<div style="display: inline-block;">
<div style="width: 50%; height: 100%; background: gray;">
Content 2(part 1)
</div>
<div style="width: 50%; height: 100%; background: tomato;">
Content 2(part 2)
</div>
</div>
</div>
<div>
<img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
</div>
</div>
</ion-content>
</ion-view>


enter image description here

Answer
<ion-content scroll="false" 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; display:flex;flex-direction:row;height:100vh;">
    <div style="flex:1;hight:100vh;">
    content 2 part 1
    </div>
     <div style="flex:1;">
      Content 2 part 2
    </div>


    </div>
    <div>
      <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
    </div>
  </ion-content>