Css 镀铬Flexbox不'；我似乎不尊重'；纵横比'；衬垫；在Firefox中很好

我有一个包含最多三个div的行。每个子div要么有一个背景图像，要么只有一些文本。由于图像div使用的是

背景图像

，并且没有定义的宽度/高度，因此它们使用设置了纵横比（在本例中使用伪元素）

这在Firefox中似乎非常有效，但在Chrome中包含的div似乎不尊重最高div的高度，如下所示：

作为参考，我使用Flexbox，将

flex-direction

设置为

column

，这样，在包含div的

max-height

上，元素应该换行。经过几个小时的戳戳和戳戳，我无法确定罪魁祸首是flexbox的问题，还是

padding bottom

aspect ratio方法的问题（尽管我怀疑不是，因为右侧的一组列似乎工作正常）

你知道为什么这会从Chrome/Webkit中的容器中跳出来吗

---

作为参考，这里有一个。

这是一个Chrome bug。请参阅此简化代码段：

.flex{
显示器：flex；
柔性流：柱包裹；
最大高度：200px；
背景：红色；
证明内容：之间的空间；
利润率：10px0；
}
.大的，小的{
背景：蓝色；
利润率：10px；
}
.大{
高度：75px；
}
.小{
高度：50px；
}

---

Ugh。谢谢你的回答-至少我现在知道这是一个bug。也感谢所有的代码——不幸的是，考虑到布局所需的灵活性，将子元素包装到列中是不可行的。回到绘图板上！