Question

如果我们在genymotion中打开它，它可以正常工作。

但是，如果我们打开这是safari ios设备移动元素的宽度是错误的（具有此选择器.main-container > .item-1的此元素的宽度） flex-container的宽度不等于child的总和（genymotion中的chrome很好）。

在许多情况下，即使在Safari浏览器中也会出现相同的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

https://codepen.io/vish123/pen/OgmvWz

Answer 1

尝试将flex-flow:column wrap更改为

  flex-direction: column;

到.main-container > .item-1。您不需要包装它，因为它已经将项目定位在彼此之下，因为方向：列。

Flex-flow：色谱柱包装在safari移动设备中无法正常工作

1 个答案: