Chrome 中的 Flexbox 似乎不尊重“纵横比”填充；在 Firefox 中很好

Question

我有一个包含最多三个 div 的包含行。每个子 div 要么有一个背景图像，要么只有一些文本。由于图像 div 使用 background-image 并且没有定义宽度/高度，因此它们具有使用 aspect ratio padding method 设置的纵横比（在本例中使用伪元素）。

这似乎在 Firefox 中完美运行，但在 Chrome 中，包含的 div 似乎不尊重最高 div 的高度，如下所示：

作为参考，我使用 Flexbox 并将 flex-direction 设置为 column，这样，在包含 div 的 max-height 上，元素应该换行。已经戳了几个小时了，我无法确定罪魁祸首是 flexbox 的问题，还是 padding-bottom 纵横比方法的问题（尽管我怀疑不是，因为右手边的列似乎工作得很好）。

关于为什么这会在 Chrome/Webkit 中脱离其容器的任何想法？

作为参考，这里是jsFiddle with kittens。

Answer 1

这是一个 Chrome 错误。查看这个简化的 sn-p：

.flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 200px;
  background: red;
  justify-content: space-between;
  margin: 10px 0;
}
.big, .small {
  background: blue;
  margin: 10px;
}
.big {
  height: 75px;
}
.small {
  height: 50px;
}

<div class="flex">
  <div class="small"></div>
  <div class="small"></div>
  <div class="big"></div>
  <div class="big"></div>
</div>
<div class="flex">
  <div class="big"></div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

在弹性容器上使用max-height，弹性项目被强制包装成两列。

在 Chrome 上，每一列都有不同的高度，flex 容器的高度是最后一列的高度。

这与规范相矛盾，因为所有柔性线（在这种情况下为列）必须具有相同的主要尺寸（在这种情况下为高度）：

6. Flex Lines
一行的main size 始终与main size 相同 flex 容器的内容框。

这个bug可能是因为先确定了flex容器的主要大小，然后flex项被排列成flex线

9. Flex Layout Algorithm

4. 使用它所参与的格式化上下文的规则来确定 flex 容器的主要大小。
5. 将弹性项目收集到弹性线中

但是，根据块布局，自动高度depends on the content。所以在安排内容之前确定它似乎没有很好的定义。

为了解决这个问题，我建议使用将每一列包装在行弹性容器的弹性项目中。

.flex {
  display: flex;
  flex-direction: row;
  background: red;
  margin: 10px 0;
}
.col {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.big, .small {
  background: blue;
  margin: 10px;
}
.big {
  height: 75px;
}
.small {
  height: 50px;
}

<div class="flex">
  <div class="col">
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="col">
    <div class="big"></div>
    <div class="big"></div>
  </div>
</div>
<div class="flex">
  <div class="col">
    <div class="big"></div>
    <div class="big"></div>
  </div>
  <div class="col">
    <div class="small"></div>
    <div class="small"></div>
  </div>
</div>