问Flex-flow:列包装在safari mobile中不起作用，在chrome中可以正常工作

EN

.main-container {
  display: flex;
  flex-flow: row wrap;
  width: 350px;
  height: 46px;
  border: 1px solid red;
}

.main-container>.item-1 {
  display: flex;
  width: auto;
  flex-flow: column wrap;
  border: 1px solid blue;
}

.main-container>.item-2 {
  display: flex;
  width: auto;
  margin-left: auto!important;
  border: 1px solid green;
}

.header_left {
  display: flex;
  width: auto;
  flex-flow: row wrap;
  border: 2px solid red;
}

<div class="main-container">
  <div class="item-1">
    <div class="simple_list1">
      <div class="header_left">
        <div class="it-1">Predictive analysis</div>
        <div class="it-2">Cool idea</div>
      </div>
    </div>
    <div class="simple_list2">Current Analysis</div>
  </div>
  <div class="item-2">Java</div>
</div>