Ứng dụng CSS3 Flexbox đầy đủ chiều cao và tràn

Question

Tôi có một ứng dụng sử dụng email cổ điển như bố cục như bố cục bên dưới.

tôi đã xây dựng nó bằng cách sử dụng mô hình CSS3 flexbox mới và nó hoạt động rực rỡ cho đến khi tôi thêm khả năng cho người sử dụng để tự động thêm các mục mới trong thư mục hộp. Tôi đã hy vọng rằng flexbox hoạt động theo cách mà miễn là có không gian còn lại trong hộp thư mục nó sẽ không bắt đầu phát triển vào hộp nhiệm vụ bên dưới. Rất tiếc, đây không phải là những gì tôi thấy (trong Chrome 17).

Tôi đã xây dựng một JSFiddle here minh họa sự cố. Chỉ cần nhấp vào liên kết Thêm Thư mục và bạn sẽ thấy hộp thư mục đang phát triển, mặc dù nó có đủ không gian để chứa con mới.

Đối với câu hỏi. Làm thế nào tôi có thể xây dựng hai hộp theo chiều dọc bằng cách sử dụng flexbox theo cách mà một chiếm hai phần ba chiều cao có sẵn (box-flex 2) và một thứ ba khác (box-flex 1) và họ làm điều đó theo cách mà khi nội dung mới được thêm vào hộp đầu tiên, nó sẽ không bắt đầu phát triển cho đến khi nó hết dung lượng.

Answer 1

Tôi không thể chắc chắn nếu đó là lỗi trình duyệt hoặc nếu thực tế thì mô hình flex được cho là hoạt động như thế nào. Nếu đó là cách nó nên làm việc tôi đồng ý rằng đó không phải là chính xác trực quan!

Tôi tìm thấy một công việc xung quanh bằng cách gói các danh sách trong div hoàn toàn được định vị với bộ tràn để tự động. Điều này cho phép các hộp flex duy trì trạng thái ban đầu của chúng và chỉ thay đổi khi toàn bộ bố cục được tính toán lại so với nội dung thay đổi.

Dưới đây là đánh dấu Cập nhật:

<section id="folders"> 
    <div class="dynamicList"> 
    <h2>Folders</h2> 
    <ul> 
     <li>Folder 1</li> 
     <li>Folder 2</li> 
    </ul> 
    <a href="#" id="add">Add Folder</a> 
    </div>  
</section> 

Và CSS Cập nhật:

#left #tasks, 
#left #folders { 
    position: relative; 
} 

.dynamicList { 
    bottom: 0; 
    left: 0; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

tôi chia hai fiddle của bạn ở đây để giới thiệu: http://jsfiddle.net/MUWhy/4/

UPDATE:

Nếu bạn muốn các tiêu đề vẫn cố định và chỉ có nội dung của danh sách thư mục và nhiệm vụ cuộn, thì tôi sẽ xem xét đặt các tiêu đề và các nút thêm vào các hộp chiều cao cố định của chúng trong div #left. Đó là một chút đánh dấu hơn nhưng vẫn khá đơn giản. Tôi đã không thử nó trên JSFiddle nhưng tôi nghĩ rằng đó sẽ là con đường tốt nhất để đi.

Answer 2

Tôi thích giải pháp này cho Jim vì nó ít bị hack hơn - nó sẽ hoạt động trên bất kỳ flexbox nào trên bất kỳ phần nào của trang. Jim chỉ có thể làm việc trên một hộp ở phía trên cùng bên trái của một trang.

Tôi đã giải quyết điều này bằng cách gói phần của hộp flex mà tôi muốn cuộn bên trong một div.scrollbox. Tôi đã tạo ra những đứa con trực tiếp của số div này có chiều cao là 0, do đó việc thêm các phần tử phụ bên trong nó sẽ không ảnh hưởng đến phần còn lại của bố cục. Tôi cũng đặt overflow-y thành auto để thanh cuộn sẽ xuất hiện nếu con của nó vượt ra ngoài giới hạn của nó.

.scrollbox { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
} 
.scrollbox > * { 
    height: 0; 
} 

Lưu ý rằng điều này sẽ chỉ hoạt động nếu nội dung có thể mở rộng được đặt trong phần tử chứa hoặc chứa phần tử. Trong ví dụ này, các phần tử li được chứa trong phần tử có chứa ul, vì vậy nó hoạt động.

Tôi cũng phải thực hiện một số thay đổi để có được 3 thành phần của flexbox trên cùng bên trái để sắp xếp chính xác, nhưng đây là ứng dụng cụ thể.

#folders { 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
} 
#folders h2, #folders #add { 
    -webkit-flex: 0 1 auto; 
} 

Tôi đã chia nhỏ jsfiddle ở đây: http://jsfiddle.net/FfZFG/.

Answer 3

Tôi đã nhận được câu trả lời này từ câu hỏi khác của tôi mà là giống nhiều hay ít: https://stackoverflow.com/a/14964944/1604261

Thay vì giải pháp @LukeGT, rằng đó là một cách giải quyết và không phải là giải pháp để có được những hiệu ứng, bạn có thể áp dụng chiều cao cho phần tử mà bạn muốn xem cuộn dọc.

Vì vậy, giải pháp tốt nhất nếu bạn muốn có một min-height trong cuộn dọc:

#container article { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 100px; 
} 

Nếu bạn chỉ muốn đầy đủ dọc cuộn trong trường hợp không có đủ không gian để xem bài viết:

#container article { 
    -webkit-flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 0px; /* or height:0px */ 
} 

Nếu bạn không thiết lập chiều cao (sử dụng chiều cao hoặc min-height) cuộn dọc sẽ không được đặt. Trong mọi trường hợp, ngay cả với chiều cao : 0px; chiều cao được tính của phần tử sẽ khác với 0.

Giải pháp của tôi với tiền tố -webkit: http://jsfiddle.net/ch7n6/4/

Sửa:

Kể từ Firefox bây giờ hỗ trợ đặc tả flexbox đầy đủ, loại bỏ -webkit- nhà cung cấp prefix nó sẽ làm việc với tất cả các trình duyệt.