html - 在 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/