为什么flexbox内部的图像不会缩小？

Question

我正在尝试设置我认为是一个非常基本的弹性盒子

我有一个包含div.让我们说简单的数学,它有一个max-width: 1000px;.我把它设置为display: flex;

在里面我有两个div.div1和div2.我希望div2总是占用正确的300px,当浏览器窗口调整大小时,div1在左侧扩展/收缩.

Div1实际上包含动态生成的文本图像,基于用户输入的内容(传统CMS系统,不要问).换句话说,它可能有一个非常宽的图像,我不知道图像实际上有多宽.当用户输入大量文本并且图像太宽时,我遇到了麻烦.IE如果div1中的图像最终为1500px宽,则会导致div1为1500px宽,这会将div2推出包含的div.

#container {
  max-width: 1000px;
  display: flex;
}

#div1 {
  flex: 1 1 auto;
}

#div1 img {
  max-width: 100%; /*this doesn't work*/
}

#div2 {
  width: 300px;
  flex: 1 0 auto;
}

如何强制div1始终尊重最大尺寸,无论图像有多大？

Answer 1

为了为flex项提供更合理的默认最小大小,此规范引入了一个新auto值作为min-width和min-height属性的初始值 .- W3C

Chrome尚未实现,但Firefox已经实现了.你能做的是:

#div1 {
    flex: 1 1 100%;
    min-width: 0; /* for Firefox and future Chrome etc. */
}

#div2 {
    width: 300px;
    flex: 0 0 auto; /* do not grow or shrink the size */
}

JSFIDDLE DEMO