html - 将 flex 容器拆分为等宽部分

Question

我正在尝试将内容 2 拆分为 2 个等宽的 div，以填充整个内容 2 的高度，但未能成功。怎么可能实现？

笨蛋: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>

Answer 1

<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>