7
Tôi muốn chứa một mục flex trong phần tử gốc để nó không tràn ra ngoài bố mẹ. Chỉ có các mặt hàng flex nên có một thanh cuộn (nếu cần thiết).Vấn đề hiển thị cuộn dọc trong Flexbox trong Firefox
Kiểu dáng của tôi hoạt động tốt trong Chrome và IE11, chứ không phải Firefox. Tôi nghi ngờ có sự khác biệt trong cách diễn giải về phong cách flex-basis được đặt trên #wrapper, nhưng tôi không thể hiểu tại sao Firefox lại hiển thị điều này theo cách khác.
Đây là render mong muốn như đã thấy trong Chrome:
Và đây là những gì xảy ra trong Firefox:
tôi có thể áp dụng một "ống băng" sửa chữa bằng cách thêm #left { height: calc(100vh - 50px); } , nhưng tôi muốn xác định sự mâu thuẫn thực sự nếu có thể.
body, html, h1 {
padding: 0;
margin: 0;
}
header {
background-color: rgba(0, 255, 255, 0.2);
height: 50px;
}
#main {
height: 100vh;
background-color: rgba(0, 255, 255, 0.1);
display: flex;
flex-flow: column;
}
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
}
#left {
overflow-y: scroll;
background-color: rgba(0, 255, 255, 0.2);
width: 30%;
}
.box {
margin: 5px 0;
height: 50px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}<div id="main">
<header>
<h1>Header</h1>
</header>
<div id="wrapper">
<div id="left">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>