Flexbox未正确包装在iOS上

Question

我有这个css：CodePen

    * {
        margin:0;
        padding:0;
        box-sizing:border-box;          
    }
    body,html {
        width:100%; height: 100%;
    }

    .v-field, .v-field-label {
      border: 1px #bcbcbc solid;
      border-radius: 4px;
    }

    .vc-min-200 {
      min-width: 300px;
    }
    .vc-6 {
        width:50%;
    }

    .panel{ 
        border:1px #ccc solid;
    }
    .row {
        outline: 1px #c00 solid;
    }

    form.v-form {
      margin-top: 10px;
    }
    form.v-form .row.flex {
      margin: 15px 0px;
      display: flex;
      flex-wrap:wrap;
    }
    form.v-form .row.flex > div {
      margin: 10px 0px;
      padding: 0px 5px;
      flex: 1 1 auto;
      /*flex: 1 1 200px;*/
    }
    form.v-form .v-field, form.v-form .v-field-label {
      width: 100%;
      padding: 6px 12px;
    }

我们的想法是拥有一个最多有2列50％宽度的表单，但是当窗口大小调整到最小宽度以下时，它应该包装成一列。

它在桌面Chrome和Android上运行良好，但在iOS（10.0.2）上无法正确包装。我附上了截图。 如果我取消注释flex: 1 1 200px行，那么它在iOS上工作正常但在窗口大小允许的情况下在桌面上产生3列，这不是我想要的。是否有适用于桌面和iOS的解决方案？

Answer 1

我认为您的问题与this Safari bug有关，在px中忽略flex基础而不是百分比。你可以尝试百分比并让我知道吗？如果我对flex有正确理解：1 1 50％;你会得到理想的效果。

form.v-form .row.flex > div {
  margin: 10px 0px;
  padding: 0px 5px;
  flex: 1 1 50%;
}

笔here