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错误。请参阅此简化代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在Flex容器上使用max-height时，Flex项目将被强制换行为两列。

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

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

  

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

这个错误可能是因为首先确定了flex容器的主要大小，然后将flex项目排列成弹性线

  

9. Flex Layout Algorithm

     

  
1. 使用参与其中的格式设置上下文的规则确定Flex容器的主要大小。
  
2. 将弹性项目收集到弹性线
  

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;