iPad上的Flex-column折叠[重复]

Question

这个问题之前已经提出过很多次了，但是 flex 模型已经发生了巨大的变化，我仍然无法找到一个可行的解决方案。

问题

• 当对象的flex方向设置为column时，所有对象的高度折叠(即height:0)
• 问题似乎仅限于 iProducts。据我所知，Flex 在桌面和 Android 上的所有浏览器中都能正常工作。
• 问题不仅限于 Safari，因为在 iPad 上进行测试时，Chrome 和 Firefox 也存在该问题(IOS 10.3.3)。

这个例子演示了这个问题。当宽度小于 600 像素时，行切换到列，问题就会出现。

.InputRow,
.InputItem,
.InputWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.InputRow,
.InputItem {
  -ms-flex-flow: wrap;
  flex-flow: wrap;
}

.InputItem,
.InputWrap {
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
}

.InputWrap {
  position: relative;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: flex-end;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  margin: 0 10px 10px 0;
}

@media all and (max-width:600px) {
  .InputRow {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
  }
}

.Bx {
  background: #b00;
  border: 5px solid #333;
}

<div class="InputRow">
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">Box 2</div>
    </div>
  </div>
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">Box 2</div>
    </div>
  </div>
</div>

<div class="InputRow">
  <div class="InputItem">
    <div class="InputWrap">
      <div class="Bx">ROW 2</div>
    </div>
  </div>
</div>

这可能是我在此处设置的嵌套结构的问题，但正如我所说，问题是孤立的。

Answer 1

您没有在容器或物品上定义任何高度。

但是，您正在告诉项目使用可用空间：

.InputItem,
.InputWrap {
  flex: 1 1 0%;
}

这条规则分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

flex-grow: 1 规则可能适用于更宽的屏幕 (flex-direction: row)，因为容器是块级元素（即宽度：100%）。

但在较小的屏幕（flex-direction: column）上，height 设置（通过flex-basis）为0%，flex-grow: 1 没有额外的工作空间，并且容器高度（与宽度不同）默认为auto（内容高度）。

所以我认为解决方案是为容器或项目增加高度。