title: Splitting flex container into equal width part
body: <p>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?</p>
  
  <p>Plunker: <a href="https://plnkr.co/edit/xTpF7FZXeo1p6g5fYqhu?p=preview" rel="noreferrer">Click here</a></p>
  
  <pre><code>&lt;ion-view title="Welcome"&gt;
    &lt;ion-content has-header="true" style="display: flex; flex-flow: column;"&gt;
      &lt;div style="height: 100%"&gt;
        &lt;div style="background-color: red;"&gt;
          Content 1 (height based on content)
        &lt;/div&gt;
        &lt;div style="background-color: blue; flex: 2;"&gt;
          &lt;div style="display: inline-block;"&gt;
            &lt;div style="width: 50%; height: 100%; background: gray;"&gt;
              Content 2(part 1)
            &lt;/div&gt;
            &lt;div style="width: 50%; height: 100%; background: tomato;"&gt;
              Content 2(part 2)
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/t1oKD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t1oKD.png" alt="enter image description here"></a></p>