为什么 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

为了给弹性项目提供一个更合理的默认最小尺寸，这个 规范引入了一个新的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