Chỉ định kích thước chữ thập flexbox tăng giá trị

Question

Có cơ chế nào để chỉ định các thuộc tính phong cách flex-cho bố trí trên trục chéo của một flexbox không?

Tôi có bố cục bao gồm hai hộp được căn chỉnh theo chiều ngang với chiều rộng tối thiểu trong hộp có chiều rộng thay đổi. Khi hộp chứa quá nhỏ để giữ hai hộp, hộp bên phải kết thúc tốt đẹp xung quanh phần dưới cùng của vùng chứa. Hộp bên trái vẫn giữ nguyên kích thước nhất định cho đến khi gói xảy ra, tại thời điểm đó nó phát triển để lấp đầy chiều rộng của vùng chứa. Tôi đã đạt được điều này với CSS sau đây:

#container { 
    display: flex; 
    flex-flow: row wrap; 
    align-items: stretch; 
} 

#left { 
    flex: 1 0 200px; 
} 

#right { 
    flex: 1000 0 200px; 
} 

Bằng cách đặt một cơ sở 200px và co 0, điều này mang đến cho các hộp bên trái có chiều rộng tối thiểu 200px, và bằng cách thiết lập một giá trị nuôi nhỏ so với khổng lồ một trong hộp bên phải, hộp bên phải sẽ lấp đầy khoảng trống còn lại và phần bên trái sẽ không thay đổi về kích thước. Tôi sắp xếp các con số theo cách này bởi vì khi container nhỏ hơn 400px, hộp bên phải kết thúc tốt đẹp xung quanh nửa dưới của thùng chứa, tại thời điểm đó giá trị tăng trưởng của hộp bên trái không bị cản trở và nó tăng lên kích thước đầy đủ của vùng chứa.

Vấn đề tôi có là với kích thước kết quả trên trục chéo. Nếu hộp bên phải đầy với nội dung, nó bắt đầu tràn container, khi tôi cần nó để bắt đầu di chuyển để thay thế. Điều tốt nhất tôi có thể làm ở đây là thiết lập một overflow-y trên container, cuộn toàn bộ vùng chứa, bao gồm cả hộp bên trái. Đặt chiều cao tối đa 100% vẫn còn tương đối so với toàn bộ chiều cao của vùng chứa và đặt bất kỳ giá trị độ cao nào khác ảnh hưởng đến chiều cao của hộp khi nó không được bao bọc, nơi tôi cần nó cũng kéo dài đến toàn bộ chiều dài.

Bạn có thể thấy hiệu ứng tại this fiddle. Khi vùng chứa nhỏ hơn 400px, hộp màu xanh bao bọc xung quanh. Hộp màu xanh có chiều cao tối thiểu là 200px, do đó, nó thỏa mãn điều đó và sau đó hai ô trải dài để lấp đầy chiều cao dọc còn lại. Nhưng khi bạn bấm đủ, hộp màu xanh bắt đầu tràn, và không thể được chứa bởi tràn-y vì không có giá trị độ cao cuối cùng trên đó.

Về cơ bản những gì tôi muốn là cùng một giá trị trong các thiết lập flex, nhưng đối với trục chéo:

#left { 
    cross: 1000 0 auto; 
} 

#right { 
    cross: 1 0 200px; 
} 

Bằng cách này cả hai đều căng ra để lấp đầy khoảng trống dọc khi không có bọc, nhưng khi quấn xảy ra hộp bên phải có chiều cao 200px và hộp bên trái lấp đầy không gian dọc còn lại. Có cách nào để đạt được hiệu ứng này, cho rằng tài sản trên không tồn tại?

Answer 1

Như bạn biết bạn muốn các hành vi khác khi dưới 400px bạn chỉ có thể sử dụng thẻ phương tiện để thay đổi hướng của dòng chảy flex. Sau đó, bạn có thể sử dụng thuộc tính flex thông thường để đặt giá trị của mình.

@media (max-width: 399px) { 
    body { 
    flex-direction: column; 
    } 

    #left { 
    cross: 1000 0 auto; 
    } 

    #right { 
    cross: 1 0 200px; 
    overflow: auto; 
    } 
} 

Không liên quan với câu trả lời này, nhưng một trợ giúp tốt khi đối phó với các vấn đề flexbox và các câu hỏi về những gì thuộc tính flex mà tồn tại là "Hướng dẫn hoàn chỉnh để Flexbox" bu CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/