Tôi đã tạo một trang dựa trên flexbox đơn giản, hiển thị chính xác trong Google Chrome (Phiên bản 44.0.2403.157), nhưng không có trong Safari (Phiên bản 8.0.2 (10600.2.5)). Tôi đã thêm tất cả các tiền tố có liên quan (tôi nghĩ) và đã dành rất nhiều thời gian nhìn vào thanh tra nhưng tôi dường như không tìm thấy nguyên nhân của vấn đề.Safari flexbox không chứa các thành phần chính xác
Trang bao gồm một vùng chứa và hai hàng flex. Hàng flex đầu tiên (tiêu đề) nên có độ cao của nó để phù hợp với nội dung của nó. Hàng flex thứ hai (nội dung) phải có chiều cao của chiều cao trình duyệt trừ đi chiều cao tiêu đề, mức tràn của vùng chứa này được đặt để cuộn. Mã hoạt động tốt khi vùng chứa nội dung không phải cuộn, nhưng ngay khi vùng chứa nội dung có bất kỳ tràn dòng tiêu đề nào không còn chứa nội dung của nó nữa. Điều gì có thể gây ra điều này?
Bộ luật:
<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}
.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: scroll;
}
</style>
</head>
<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
<p>Header - The height of the header is based on the content</p>
<p>Header - The height of the header is based on the content</p>
</div> <!-- end of flex row header -->
<div class="row content">
<p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>
rendered đúng với hộp nội dung không có tràn:
rendered không đúng với nội dung hộp có overflow:
Khi tôi nhớ lại, Safari có vấn đề với các giá trị độ cao như phần trăm khi xử lý các phần tử 'display: flex'. Nếu cha mẹ là một tỷ lệ phần trăm sau đó có con w/out chiều cao tuyên bố có thể làm cho họ kế thừa cùng một giá trị phần trăm. – TylerH
Vì vậy, nếu tôi muốn phụ huynh (hộp) luôn điền vào toàn bộ chiều cao của trang, tôi nên làm thế nào để cài đặt nó mà không cần sử dụng phần trăm? –
Tôi không thể thử nghiệm trên Safari vì tôi đang sử dụng máy Windows, nhưng bạn có thể thử '100vh' để làm cho phần tử bằng chiều cao của chế độ xem (màn hình). – TylerH