Làm cách nào để nhận được hành vi Flexbox FF 33.x trong FF 34.x?

Question

Chúng tôi sử dụng flexbox rất nhiều cho một ứng dụng máy tính để bàn như tìm kiếm ứng dụng web và nó đã được làm việc ra tuyệt vời.

Nhưng với sự mới nhất Developer Edition Firefox (35.0a2) bố trí không như mong đợi (nó phát triển vượt ra ngoài khung nhìn): http://tinyurl.com/k6a8jde

này hoạt động tốt trong Firefox 33.1.

tôi sẽ giả định này có gì để làm với những thay đổi flexbox mô tả ở đây: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

Nhưng thật đáng buồn tôi chưa thể tìm ra một cách để có được những hành vi FF 33.x trong FF 34 hoặc 35. x.

Bất kỳ trợ giúp nào về cách bố trí hoặc cách tách biệt vấn đề tốt hơn đều được đánh giá cao.

Answer 1

Sự khác biệt có liên quan là "kích thước tối thiểu ngụ ý của các mục flex", một tính năng mới trong thông số kỹ thuật flexbox. (hoặc đúng hơn, một đối tượng địa lý đã bị xóa và được giới thiệu lại)

Cách đơn giản (ngắn nhất) để khôi phục hành vi cũ là thêm quy tắc kiểu này: * { min-height:0 } (hoặc min-width, nếu bạn lo ngại về tràn flexbox, nhưng có vẻ như testcase của bạn chỉ gặp rắc rối với tràn từ một container flex thẳng đứng).

Cập nhật fiddle, với sự thay đổi đó: http://jsfiddle.net/yoL2otcr/1/

Thực sự, bạn chỉ nên dùng cần phải thiết lập min-height:0 trên các yếu tố cụ thể - đặc biệt, bạn cần nó trên mỗi phần tử rằng:

1. là một đứa trẻ của một thùng chứa theo định hướng 'cột'

2. có một hậu duệ cao, mà bạn muốn cho phép tràn (có lẽ sẽ được xử lý một cách duyên dáng bởi một trung gian yếu tố điện tử với "overflow: scroll", như trường hợp ở đây)

(Trong trường hợp của bạn, có thực sự là một đống lồng nhau của các yếu tố này, kể từ khi bạn có một yếu tố cao nhất bên trong nhiều container flex lồng nhau. Vì vậy, bạn có thể cần min-height:0 tất cả mọi cách, thật không may.)

(Nếu bạn tò mò, lỗi này có nhiều thông tin hơn bị hỏng trên web do thay đổi đặc điểm này: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520)

Answer 2

không có bản sửa lỗi nào trong số này có hiệu quả đối với tôi, mặc dù chúng hoạt động. Trong trường hợp của tôi, tôi đã cung cấp một dự phòng display: table-cell, dường như đang tiếp quản. Sử dụng Sass, kể cả nó như thế này, dự phòng làm việc cho IE mà không ảnh hưởng FF:

flex: auto; // or whatever 
.ie & { 
    display: table-cell; 
}