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

【问题标题】：Content ignoring max-width when within a Flexbox container in Firefox?在 Firefox 的 Flexbox 容器中内容忽略最大宽度？
【发布时间】：2014-08-15 07:40:30
【问题描述】：

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

以下代码在 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/

【问题讨论】：

您能否更好地解释您想要达到的目标？顺便说一句，你的小提琴在 css 规则中有错误
@Chris - 这不是 CSS。是 SCSS。被 Fiddle 接受。

标签： html css firefox flexbox

【解决方案1】：

尝试将img 与.container 分开

例如：

.container {
--your style here
}

img {
    max-width:100%;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：