Đảo ngược cột Flexbox và tràn trong Firefox/IE

Question

Tôi đang cố tạo ứng dụng đáp ứng; trên màn hình lớn hơn, có danh sách các div và bạn có thể cuộn lên để xem các div trước đó (hành vi "truyền thống"). Trên màn hình nhỏ hơn, nó hiển thị cùng một danh sách nhưng đảo ngược thứ tự, do đó, việc di chuyển xuống sẽ hiển thị các div.

Tôi figured flexbox sẽ là một giải pháp tuyệt vời cho điều này, và nó là ... trên Chrome.

Đây là HTML:

<div id="list"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
    <div class="item">7</div> 
    <div class="item">8</div> 
    <div class="item">9</div> 
</div> 

Và, CSS:

#list { 
    display: flex; 
    flex-direction: column-reverse; 
    height: 250px; 
    overflow-y: scroll; 
    border: 1px solid black; 
} 

.item { 
    flex: 1; 
    padding: 2em; 
    border: 1px dashed green; 
} 

Cũng như một fiddle để hiển thị nó: http://jsfiddle.net/jbkmy4dc/3/

Trong Chrome, list div đúng cách cho thấy một thanh cuộn. Tuy nhiên, trong Firefox và trong IE/Edge, thanh cuộn có thể nhìn thấy nhưng bị vô hiệu hóa.

Bất kỳ ý tưởng nào? Tôi có thiếu tiền tố của nhà cung cấp không?

Answer 1

Là một khắc phục, bạn có thể phân phối các phong cách của container của bạn trong số hai container khác nhau:

• Người ngoài với các kích thước, biên giới và tràn
• Các bên trong một với phong cách flexbox

Nếu bạn muốn nó được cuộn xuống đáy theo mặc định, bạn có thể sử dụng JS: Scroll to bottom of div?

function scrollToBottom(el) { el.scrollTop = el.scrollHeight; } 
 
scrollToBottom(document.getElementById('list'));

#list { 
 
    height: 250px; 
 
    overflow-y: scroll; 
 
    border: 1px solid black; 
 
} 
 
#inner-list { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
} 
 
.item { 
 
    flex: 1; 
 
    padding: 2em; 
 
    border: 1px dashed green; 
 
}

<div id="list"> 
 
    <div id="inner-list"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    </div> 
 
</div>

Answer 2

#list { 
    /*display: flex; 
    flex-direction: column-reverse;*/ 
    height: 250px; 
    -ms-overflow-y:scroll; 
    overflow-y:scroll; 
    border: 1px solid black; 
} 

Sự cố của bạn xuất phát từ hiển thị: flex; tài sản không được hỗ trợ trong IE 8 và IE 9 !! :)

Answer 3

Đây là lỗi trong Firefox, Edge và IE11.

Với flex-direction: column-reverse thanh cuộn chỉ xuất hiện trong Chrome.

Nếu bạn chuyển sang column thanh cuộn hoạt động trên tất cả các trình duyệt. thông tin

thêm:

• Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable

• Philip Walton/flexbugs - Column-reverse and overflow-y not scrollable