css - Chrome 中的 Flexbox 似乎不遵守 'aspect ratio' 填充；在 Firefox 中很好

Question

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

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

作为引用，我使用的是 flex-direction 设置为 column 的 Flexbox，这样，给定一个 max-height div，元素应该换行。已经戳戳了几个小时，我无法确定罪魁祸首是 flexbox 的问题，还是 padding-bottom 宽高比方法的问题(尽管我怀疑不是，因为右侧的列集似乎工作得很好)。

关于为什么这会打破它在 Chrome/Webkit 中的容器有什么想法吗？

作为引用，这里有一个 jsFiddle with kittens .

Answer 1

这是一个 Chrome 错误。请看这个简化的片段:

.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>

在 flex 容器上使用 max-height，flex 元素被强制包装成两列。

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

这与规范相矛盾，因为所有 flex 行(在本例中为列)必须具有相同的主要尺寸(在本例中为高度):

6. Flex Lines
The main size of a line is always the same as the main size of the flex container’s content box.

这个bug可能是因为先确定了flex容器的主要尺寸，然后将flex项排列成flex行

9. Flex Layout Algorithm

4. Determine the main size of the flex container using the rules of the formatting context in which it participates.
5. Collect flex items into flex lines

但是，根据 block 布局，自动高度depends on the content .所以在安排内容之前确定它似乎不太明确。

要修复它，我建议将每一列包装在行 flex 容器的 flex 元素中。

.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>