Firefox và flexbox - Khi sử dụng white-space: nowrap trên phần tử con hộp linh hoạt phá vỡ

Question

Hãy xem jsFiddle này trong Safari hay Chrome, sau đó trong Firefox: http://jsfiddle.net/brandondurham/LRJhm/

gì nó trông giống như trong Webkit: http://cloud.smallparade.com/B4TE

Có vẻ như trong Firefox: http://cloud.smallparade.com/B53R

Bạn sẽ thấy hộp linh hoạt bị hỏng trong Firefox. Hộp dài hơn của hai hộp (.left) có thuộc tính css white-space được đặt thành nowrap vì, tốt, tôi không muốn nó quấn. Bất động sản duy nhất này là làm cho hộp phá vỡ linh hoạt và mở rộng để phù hợp với toàn bộ nội dung của .left div.

Bất kỳ ai khác nhìn thấy hành vi này? Có một sửa chữa?

Answer 1

Đó là cách hoạt động của nó. Flexbox phân phối không gian bên trái sau khi chiều rộng nội tại của các phần tử đã được tính toán, nó không kiểm soát chiều rộng nội tại của chính các phần tử đó. Đây là lý do tại sao kết quả là unintuitive nếu bạn không đặt chiều rộng rõ ràng trên mọi thứ, mặc dù nhóm làm việc đang xem xét thông số.

Lời khuyên của tôi sẽ là try using display: table; instead, mặc dù bạn có thể gặp phải một số sự cố tương tự.

Answer 2

Trong khi tôi nghĩ câu trả lời được chấp nhận bởi robertc là chính xác (trong đó là cách hộp flex được cho là hoạt động). Bạn có thể vô hiệu hóa chiều rộng "nội tại" mà anh ta nói về bằng cách đặt chiều rộng của hộp đó một cách rõ ràng thành 0. Cách này, chỉ tính đến phân bố chiều rộng được chỉ định của bạn. Hành vi này có thể được giải thích, bởi vì, khi bạn đặt tất cả chiều rộng hộp thành 0, thì tất cả chiều rộng sẽ trở thành "còn lại", do đó phân phối phụ thuộc hoàn toàn vào những gì bạn chỉ định.

Answer 3

Đặt width: 0 trên phần tử và điều đó sẽ trở thành "chiều rộng ưa thích" và sẽ làm cho các mục văn bản không gói bên trong phần tử hoạt động chính xác.

http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html