ios - IOS : flex direction column overlapping elements 中的 flexbox 布局

Question

Flexbox 属性在任何地方都有效，除了 IOS 上的 safari mobile。

我们有 3 张图像，它们应该使用 flexbox 布局，以列方向分布，并具有适当的间距。

页码:http://asedis.sp1.netkom.it/?page_id=292

.imgcontrolandmanagmentresizeblablablabl>.vc_column-inner .wpb_wrapper {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -webkit-box-orient: vertical;
  display: -webkit-flex;
  display: -ms-flex;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

如您所见，我包含了所有供应商前缀并尝试应用“-webkit-box-orient: vertical;”解决问题，但没有用。

发生的情况是，在 safari mobile 上，您会看到 3 张图像相互重叠。并且不尊重他们在所有其他浏览器(chrome、firefox..)中已有的行为。

每次我使用 flex box 时都会发生这种情况，safari 总是给我这个问题。如果我使用 flex-direction: column; flex 的 child 相互重叠。

我搜索并尝试了不同的方法，但都没有成功。

Answer 1

我在 iphone 中遇到了同样的问题， sibling 是重叠的，尽管我在 child 身上使用了 flex : 1。但是当我使用 flex-direction : column 时， sibling 是重叠的。

所以我通过为一个 sibling 提供最小高度来解决这个问题并且它起作用了。