html - 列换行的 Safari 问题

Question

HTML:

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

CSS:

.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;
}

在 safari 和 chrome 中打开此页面。在 chrome 中，flex 子项被紧紧包裹(列包裹)但在 safari 中有一个额外的空间。我不确定为什么会有这个额外的空间，请澄清并提供修复。我也不确定哪种行为是正确的，safari 还是 chrome

Answer 1

使用供应商前缀

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