Perché l'immagine nel flexbox non si riduce?

Question

Sto provando a impostare quello che penso sia un flex-box piuttosto semplice

Ho un div di contenimento. Diciamo per matematica facile che ha un max-width: 1000px;. L'ho impostato su display: flex;

All'interno di esso ho due div. div1 e div2. Voglio div2 prendere sempre il giusto 300 px, con div1 espansione/contrazione a sinistra mentre la finestra dei browser viene ridimensionata.

Div1 contiene in realtà un'immagine di testo generata dinamicamente, in base a ciò che un utente digita (sistema CMS legacy, non chiedere). In altre parole, potrebbe avere un'immagine molto ampia, e non so in anticipo quanto sarà effettivamente l'immagine. Mi trovo nei guai quando l'utente inserisce molto testo e l'immagine è troppo ampia. IE se l'immagine in div1 finisce per essere larga 1500px, fa sì che div1 sia largo 1500px, il che spinge div2 fuori dal div contenente.

#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; 
} 

Come forzo div1 di rispettare sempre il max-size, indipendentemente da quanto grande di un'immagine viene spinto in esso?

Answer 1

Per fornire una dimensione minima predefinita più ragionevole per gli elementi flessibili, questa specifica introduce un nuovo auto valore come il valore iniziale dei min-width e min-height proprietà. - W3C

Chrome non lo ha ancora implementato, ma Firefox lo ha già. Che cosa si può fare è:

#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