CSS: Flex Box không in tất cả các trang trên Firefox

Question

Tôi có một trang với một cấu trúc tương tự như sau:

<main> 
    <section> 
     <article></article> 
     <aside></aside> 
    </section> 
</main> 

Trong CSS, tôi bao gồm:

main { 
    display: flex; 
    flex-direction: row; 
} 

bài viết là thường dài nhiều trang.

Khi tôi in hoặc xem trước bản in, tôi thấy rằng nó chỉ cung cấp cho tôi trang đầu tiên. Sau khi thử nghiệm một số, tôi đã có giải pháp này:

@media print { 
    aside { 
     display: none; 
    } 
    main { 
     display: block; 
    } 
} 

Tức là, bằng cách sử dụng display: block Tôi có thể in tất cả các trang để in lại. Trong trường hợp này, không sao, vì tôi không muốn aside in, vì vậy tôi không cần hành vi flex, nhưng đó không phải lúc nào cũng như vậy.

Dường như hoạt động tốt trên Safari và Chrome. Tôi đang thử nghiệm trên máy Mac.

Tại sao tính năng này không hoạt động trên Firefox?

Trang thực có thể được tìm thấy tại: https://www.thewebcoder.net/articles/toggling-attributes. Nó vẫn còn ở giai đoạn đầu.

Answer 1

Sau khi xem xét điều này một chút, tôi vẫn không chắc chắn về việc Firefox gây ra các thùng chứa in flex bị cắt bỏ. Tôi đã tìm thấy một số báo cáo lỗi rất cũ về Bugzilla (ví dụ: https://bugzilla.mozilla.org/show_bug.cgi?id=258397), nhưng chúng có liên quan đến các thuộc tính tràn trên thẻ body. Thật không may, cố gắng để điều chỉnh tràn của cơ thể cho điều này không có gì.

Tôi thậm chí còn đi đến Bootstrap 4's page sử dụng bố cục dựa trên flexbox. Chắc chắn, cố gắng in nó trên kết quả Firefox trong cùng một vấn đề.

Cuối cùng, ngay cả display: inline-block cũng có tác dụng tương tự.

Dường như với tôi rằng việc buộc display: block khi in là điều sẽ đảm bảo Firefox được phân loại chính xác. Lý tưởng nhất, cách bố trí bạn sử dụng để in sẽ càng đơn giản càng tốt để điều này không trở thành quá nhiều cản trở. Tuy nhiên, nó rất đáng ngạc nhiên, ít nhất là với tôi.

Có lẽ ai đó có nhiều kiến ​​thức hơn có thể tham gia và thông báo liệu đây có phải là lỗi chính đáng của Firefox hay chỉ là một phần trong triết lý thiết kế của họ.