Tạo flexbox kế thừa chiều rộng thích hợp trong IE11

Question

Chúng tôi có một loạt các thành phần div được cho là flex trong IE11 theo cùng một hành vi trong Chrome. Trong câu lệnh sau, bạn sẽ tìm thấy các phần tử hộp kiểm tạo thành cấu trúc 'cột', cũng như các phần tử hộp kiểm được dự kiến ​​sẽ lấp đầy chiều rộng của toàn bộ phụ huynh.

Trên hàng thứ hai nơi các thành phần hộp kiểm có chiều rộng bắt đầu, phần tử đó được dự kiến ​​sẽ bọc vào dòng kế tiếp, vì phần tử .grid__item-flex trong đó vượt quá chiều rộng đó. Tuy nhiên, trên IE11, chiều rộng đó chấm dứt được tôn trọng, và do đó .grid__item-flex tiếp tục tràn chiều rộng của phần tử gốc.

Các giải pháp tiềm năng không thành công bao gồm thực thi chiều rộng trên .grid__item-flex; nơi chúng tôi cung cấp cho nó chiều rộng 100%, nhưng các thành phần hộp kiểm lồng nhau ở trên sẽ mất cấu trúc cột của nó. Ngoài ra, max-width: 100% là thuộc tính dường như bị bỏ qua khi chúng tôi áp dụng nó cho .grid__item-flex.

Có giải pháp CSS để có thể buộc .grid__item-flex tôn trọng chiều rộng vùng chứa mà không phá vỡ các cột lồng nhau phía trên nó không và đảm bảo rằng phần tử hộp kiểm cuối cùng nằm trên cùng một dòng?

The JSFiddle that replicates my problem can be found here. Ví dụ hoạt động như mong đợi trên Chrome.

---

Để tóm tắt, có hai trường hợp flexboxes phải làm việc cùng một lúc:

1) n số div liên tiếp mà kết thúc tốt đẹp vào dòng tiếp theo nếu chiều rộng hàng vượt quá chiều rộng của cha mẹ

• Chúng tôi có thể đạt được điều này bằng cách sử dụng flex-wrap: wrap, nhưng chỉ khi phần tử có chiều rộng chính xác

2) div rằng kết thúc tốt đẹp đến dòng kế tiếp nếu nó nội dung của riêng vượt quá chiều rộng của cha mẹ

---

Những điều tôi đã cố gắng:

• Mở rộng ra tốc ký flex: 1 vào thuộc tính đầy đủ của nó flex-grow flex-shrink flex-basis là "giá trị mặc định của IE10 và IE11 cho flex là 0 0 tự động thay vì 0 1 tự động, theo thông số dự thảo, tính đến tháng 9 năm 2013"

• Sử dụng một cho IE Flexbox, tuy nhiên dự án này là no longer being maintained (và không làm việc như một sửa chữa)

• Sử dụng một PostCSS plugin cho Webpack mà cố gắng sửa chữa toàn cầu sử dụng flex: 1 1 0%

• Áp dụng width: 100% trên div mà tràn cha mẹ của nó gây ra các cột lồng nhau ở trên để biến thành một cột dài, do đó mặc dù nó sửa chữa một phần vấn đề tràn, nó đánh bại mục đích của việc có flexbox ở nơi đầu tiên (vì chúng tôi muốn càng nhiều divs càng tốt để flex thành một hàng) .

Answer 1

Nếu bạn cần một giải pháp mà không liên quan đến tuyên bố chiều rộng, tôi đã có thể làm việc này với một vài thông số kỹ thuật flex:

Xem ví dụ: https://jsfiddle.net/0ykq19um/

.grid__item-flex { 
    flex: 0 1 auto; 
} 

Để rõ ràng với IE,

.grid__item-flex:only-child { 
    flex: 1 1 auto; 
} 

Để cho phép chiều rộng đầy đủ và

.grid__row-overflow { 
    flex: 1 1; 
} 

Đối với một lớp mới trên .grid__row.grid__row-md.parent mà bao quanh (khả năng) hàng tràn.