Tại sao hình ảnh bên trong flexbox không co lại?

Question

Tôi đang cố gắng thiết lập những gì tôi nghĩ là một hộp cơ bản khá đơn giản

Tôi có div chứa. Cho phép nói cho toán dễ dàng rằng nó có một max-width: 1000px;. Tôi đã đặt nó thành display: flex;

Bên trong nó tôi có hai div. div1 và div2. Tôi muốn div2 luôn chiếm đúng 300px, với div1 mở rộng/ký hợp đồng ở bên trái khi cửa sổ trình duyệt được thay đổi kích thước.

Div1 thực sự chứa hình ảnh văn bản được tạo động, dựa trên nội dung người dùng nhập vào (hệ thống CMS cũ, không hỏi). Nói cách khác, nó có thể có một hình ảnh thực sự rộng trong đó, và tôi không biết trước thời gian hình ảnh sẽ thực sự rộng như thế nào. Tôi gặp sự cố khi người dùng đặt nhiều văn bản và hình ảnh quá rộng. IE nếu hình ảnh trong div1 kết thúc lên đến 1500px rộng, nó làm cho div1 rộng 1500px, đẩy div2 ra khỏi div chứa.

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

Làm cách nào để bắt buộc div1 luôn tôn trọng kích thước tối đa, bất kể kích thước của hình ảnh lớn như thế nào?

Answer 1

Để cung cấp một kích thước tối thiểu mặc định hợp lý hơn cho các hạng mục flex, đặc điểm kỹ thuật này giới thiệu một giá trị auto mới là giá trị ban đầu của min-width và min-height tài sản. - W3C

Chrome chưa triển khai nhưng Firefox đã có. Những gì bạn có thể làm là:

#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