Vấn đề IE 11 với mục flexbox với chiều rộng tối đa

Question

Trong IE 11 khi một mục mặt hàng không đúng trung tâm nếu chúng có thuộc tính chiều rộng tối đa. Tuy nhiên, ví dụ này hoạt động trong Chrome và Firefox.

JS Bin

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: blue; 
 
    width: 100%; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    max-width: 200px; 
 
}

<div class="container"> 
 
    <div class="red">non centered box</div> 
 
</div>

Answer 1

Đây là một lỗi. Nhưng theo số IE Feedback nó được cho là đã được sửa.

Để giải quyết sự cố, bạn có thể xóa flex-grow: 1; nếu bạn không phải sử dụng.

Answer 2

Đặt rõ ràng width: calc(100%); để IE biết chiều rộng hộp và đặt chính xác vào đúng chiều rộng hộp.