Dlaczego obraz wewnątrz flexbox nie kurczy się?

Question

Próbuję skonfigurować to, co myślę, że jest całkiem podstawowy flex-box

Mam div zawierający. Powiedzmy, że dla łatwej matematyki jest to max-width: 1000px;. Ustawiłem to na display: flex;

Wewnątrz tego mam dwa divy. div1 i div2. Chcę, aby div2 zawsze zajmowało właściwe 300px, z div1 rozszerzaniem/kontraktowaniem po lewej, gdy zmieni się rozmiar okna przeglądarki.

Div1 faktycznie zawiera dynamicznie generowany obraz tekstu, w oparciu o to, co użytkownik wpisze (starszy system CMS, nie pytaj). Innymi słowy, może mieć naprawdę szeroki obraz i nie wiem z góry, jak szeroki będzie ten obraz. Wpadam w kłopoty, gdy użytkownik wkłada dużo tekstu, a obraz jest zbyt szeroki. IE, jeśli obraz w div1 kończy się szerokością 1500 pikseli, powoduje, że div1 ma szerokość 1500 pikseli, co wypycha div2 z zawierającego go 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; 
} 

Jak wymusić Div1 zawsze przestrzegać maksymalnego rozmiaru, niezależnie od tego, jak duży obraz jest popchnął do niego?

Answer 1

W celu zapewnienia bardziej racjonalną domyślny rozmiar minimalny dla pozycji typu flex, ta specyfikacja wprowadza nową wartość auto jako wartości początkowej min-width i min-height właściwości. - W3C

Chrome jeszcze tego nie zaimplementował, ale Firefox już to ma. Co można zrobić, to:

#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