firefox tràn-y không hoạt động với flexbox lồng nhau

Question 1

Tôi đã thiết kế bố cục 100% chiều rộng 100% chiều cao với flexbox css3, hoạt động trên cả IE11 (và có thể trên IE10 nếu mô phỏng của IE11 là đúng).

Nhưng Firefox (35.0.1), tràn-y không hoạt động. Như bạn có thể thấy trong codepen này: http://codepen.io/anon/pen/NPYVga

firefox không hiển thị tràn chính xác. Nó hiển thị một thanh cuộn

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.level-1-col1 {
  width: 20em;
  overflow-y: auto;
}
.level-1-col2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.level-2-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid red;
  box-sizing: border-box;
  overflow-y: auto;
}

<html>
<body>

    <div class="level-0-container">

        <div class="level-0-row1">
            Header text
        </div>

        <div class="level-0-row2">

            <div class="level-1-col1">
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                
            </div>

            <div class="level-1-col2">

                    <div class="level-2-row1">
                        Some text
                        <p/> Some text 2
                        <p/> Some text 3
                        <p/> 
                    </div>

                    <div class="level-2-row2">
                        <p>some text</p>
                        <p>some text</p> 
                        <p>some text</p> 
                        <p>some text</p>
                        <p>some text</p>
                        <p>some test</p>
                    </div> 
                </div>

        </div>

    </div>
</body>


</html>

Mở rộng đoạn mã

Question 2

tl; dr: bạn cần min-height:0trong .level-0-row2quy tắc của mình . ( Đây là một codepen với bản sửa lỗi đó .)

Giải thích chi tiết hơn:

Các mục Flex thiết lập kích thước tối thiểu mặc định dựa trên kích thước nội tại của con chúng (không tính đến thuộc tính "tràn" trên con / con cháu của chúng).

Bất cứ khi nào bạn có một phần tử overflow: [hidden|scroll|auto] nằm bên trong một mục linh hoạt, bạn cần cung cấp cho mục linh hoạt tổ tiên của nó min-width:0(trong một thùng chứa linh hoạt ngang) hoặc min-height:0(trong một thùng chứa linh hoạt dọc), để vô hiệu hóa hành vi kích thước tối thiểu này hoặc nếu không thì linh hoạt mục sẽ từ chối thu nhỏ hơn kích thước nội dung tối thiểu của trẻ.

Xem https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 để biết thêm ví dụ về các trang web đã bị tấn công bởi điều này. (Lưu ý rằng đây chỉ là một siêu dữ liệu để theo dõi các trang web đã bị hỏng do loại vấn đề này, sau khi văn bản đặc tả này được triển khai - nó thực sự không phải là một lỗi trong Firefox.)

~~Bạn sẽ không thấy điều này trong Chrome (ít nhất, không phải khi đăng bài này) vì họ chưa thực hiện hành vi định kích thước tối thiểu này .~~ (CHỈNH SỬA: Chrome hiện đã triển khai hành vi giảm kích thước tối thiểu này, nhưng chúng vẫn có thể thu gọn kích thước tối thiểu về 0 không chính xác trong một số trường hợp .)