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

想知道是否有其他人正在经历以下情况，并找到了解决方案或可能有建议

以下代码在Chrome 35.0.1916.153上正确呈现，但在Firefox 29.0.1上不正确：

CSS:

HTML:

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

尝试将img与.container分离

例如：

添加最小宽度：1px；到.容器

---

你能更好地解释一下你想要实现什么吗？顺便说一下，你的小提琴在css中有错误rules@Chris-这不是CSS。是SCSS。被小提琴手接受。

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

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

.container {
--your style here
}

img {
    max-width:100%;
}