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的大小推入其中，我如何强制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

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

1 个答案: