Блог

Интересно, испытывает ли кто-нибудь еще следующее и либо нашел решение, либо может иметь предложения.

Приведенный ниже код корректно отображается в 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/

Добавить min-width: 1px; в .container .

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

попробуйте отделить img от вашего .container

например:

 .container {
--your style here
}

img {
    max-width:100%;
}