Safari中的flexbox中出现神秘的空白区域

Question

我正在尝试根据此answer垂直对齐网格列。但是，输出的右上角是一块神秘的空白，我不知道如何填充它。

这是我在浏览器中看到的内容（Safari版本9.1.2（11601.7.7））：

这是我的代码：

  1 2
1 0 1
2 1 0

.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class^='col-'] {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .equal2,
  .equal2 > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 0 auto;
  }
}

Answer 1

所以这是一种不寻常的情况，似乎是Safari独有的。

但是在游戏中使用了大量的Bootstrap游戏，可能会发生奇怪的事情。

div[class^="col-"]容器（row wrap）中有一组flex项（row equal）。

每个项目都有width: 50%，box-sizing: border-box和margin: 0，全部由Bootstrap应用。

在50％中包含填充和边框，没有边距，每行中有两个项目，每三个项目都会换行。这就是Chrome，Firefox，IE11和Edge中发生的情况。

然而，在Safari中，第二个弹性项目是包装，在第一行留下一个大的开放空间。

在对代码的粗略回顾中，没有什么我能找到这个行为的原因。 （我没有对应用的每个Bootstrap样式进行故障排除。）

但仔细检查渲染的布局会在第一个项目的左边距区域显示一个小间隙（可能是1px）。

此额外空间仅在Safari中出现，仅在第一个弹性项目旁边，强制第二个项目换行。

参考上图，显示容器的黄色背景，并且第一列中的边框未对齐，错位很明显。

所以我认为这可以确定问题。

就解决方案而言，我现在建议的最好的方法是将第一项的大小减少1-2个像素，或者应用相同数量的负margin-left。这些方面的东西：

.equal > div[class^='col-']:first-child {
     width: calc(50% - 1px);
}

revised fiddle