在Firefox中的Flexbox容器中忽略最大宽度的内容？

Question

想知道是否有其他人遇到以下情况并且找到了解决方案或者可能有建议。

以下代码在Chrome（35.0.1916.153）上正确呈现，但在Firefox（Firefox 29.0.1）上没有：

CSS：

.container {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  overflow: hidden;
}
.container img {
  max-width: 100%;
}

HTML：

<div class="container">
  <img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"/>
</div>

可在此处找到可运行的示例：

http://jsfiddle.net/Jc3A3/16/

Answer 1

将min-width: 1px;添加到.container。

https://ntucker.true.io/ntucker/solution-firefox-34-ignoring-max-width-for-flexbox/

Answer 2

尝试将img与.container

分开

例如：

.container {
--your style here
}

img {
    max-width:100%;
}