Почему изображение внутри flexbox не сжимается?

Я пытаюсь настроить то, что я думаю, довольно простой flex-box

у меня есть содержащий div. Скажем, для легкой математики у него есть max-width: 1000px;. Я установил его на display: flex;

внутри него у меня есть два дива. div1 и div2. Я хочу, чтобы div2 всегда занимал правый 300px, а div1 расширялся / сжимался слева по мере изменения размера окна браузеров.

Div1 фактически содержит динамически генерируемое изображение текста, основанное на том, что пользователь вводит в (устаревшая CMS система, не спрашивайте). Другими словами, в нем может быть очень широкое изображение, и я не знаю заранее, насколько оно будет на самом деле широким. У меня возникают проблемы, когда пользователь помещает много текста, а изображение слишком широкое. Т. е. если изображение в 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 всегда уважать максимальный размер, независимо от того, насколько большое изображение вставляется в это?

6
css css3 flexbox

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

6