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

Question

我有一个 2 列的 flexbox 布局。

第一列有一个非常大的子元素(图像)。它很大的原因是它在 Retina 显示器上看起来不错。图片使用 max-width:100% 进行缩放。

在 Chrome 中，布局工作正常。但在 Firefox/IE 中，图像会破坏布局。有什么办法可以让它正常显示吗？

这是布局的代码笔:http://codepen.io/madhusharma/pen/YXNbVE

这是 HTML:

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

这是 CSS:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  max-width:960px;
  margin:auto;
}

.unit-body {
  display: flex;
  flex-flow: row wrap; 
}

.unit-aside {
    flex: 1 50%;
  padding: 10px;
}

.unit-main {
  flex: 1 50%;
  padding: 10px;
}

img {
  max-width:100%;
  height:auto;
}

Answer 1

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

此外，Firefox 似乎处理不当，我找到了这个答案:https://stackoverflow.com/a/26916542/152016

将 min-width:0; 添加到 .unit-aside ，它应该可以工作。