ios - 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 basis。你能试试百分比让我知道吗？如果我对 flex 的理解是正确的: 1 1 50%;你得到了想要的效果。

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

笔here