Flexbox：具有大子元素的两列布局 - 适用于Chrome但不适用于Firefox / IE

Question

我有一个2列的flexbox布局。

第一列有一个非常大的子元素（图像）。它很大的原因是它在Retina显示器上看起来很好。图像使用max-width：100％进行缩放。

在Chrome中，布局运行正常。但在Firefox / IE中，图像打破了布局。 有没有办法让它正确显示？

以下是布局的Codepen：http://codepen.io/madhusharma/pen/YXNbVE

这是HTML：

receiveTimeout

这是CSS：

<div class="container">

<div class="unit-body reading-style">
<div class="unit-aside">
<img src="http://placehold.it/1077x1000"/>
</div>

<div class="unit-main">
<p>Text</p>
</div>
</div>

</div>

Answer 1

尝试从flex-flow: row wrap;删除.unit-body。

此外，Firefox似乎错误地处理了这个问题，我找到了这个答案：https://stackoverflow.com/a/26916542/152016

将min-width:0;添加到.unit-aside，它应该有效。