फ्लेक्सबॉक्स के अंदर छवि क्यों कम नहीं होती है?

Question

मैं जो सोचता हूं वह एक सुंदर मूल फ्लेक्स-बॉक्स

मेरे पास एक div है। आइए आसान गणित के लिए कहें कि इसमें max-width: 1000px; है। मैं इसे display: flex;

इसके बारे में अंदर करने के लिए निर्धारित किया है मैं दो divs है। div1 और div2। मैं div2 को हमेशा 300px लेना चाहता हूं, बाईं ओर div1 विस्तार/अनुबंध के साथ ब्राउज़र विंडो का आकार बदल गया है।

Div1 वास्तव में पाठ का एक गतिशील रूप से उत्पन्न छवि, क्या में एक उपयोगकर्ता प्रकार (विरासत सीएमएस प्रणाली, मत पूछो) के आधार पर होता है। दूसरे शब्दों में, इसमें वास्तव में एक विस्तृत छवि हो सकती है, और मुझे समय से पहले पता नहीं है कि छवि वास्तव में कितनी व्यापक होगी। जब उपयोगकर्ता बहुत सारे टेक्स्ट में डालता है और छवि बहुत व्यापक होती है तो मैं परेशानी में पड़ रहा हूं। आईई अगर div1 में छवि 1500px चौड़ी हो जाती है, तो यह div1 को 1500px चौड़ा होने का कारण बनती है, जो div div से div2 को धक्का देती है।

#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

फ्लेक्स मदों के लिए एक और अधिक उचित डिफ़ॉल्ट न्यूनतम आकार देने के लिए इस विनिर्देश min-width और min-height गुण का प्रारंभिक मूल्य के रूप में एक नया auto मूल्य प्रस्तुत करता है। - W3C

क्रोम ने अभी तक इसे लागू नहीं किया है, लेकिन फ़ायरफ़ॉक्स पहले से ही इसे लागू कर चुका है। आप क्या कर सकते है:

#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