IE 11中的Flexbox重叠flex项目

Question

Screenprint

父容器具有显示：flex。此外，容器还启用了水平滚动。弹性项目也具有特定的宽度。 它可以在所有其他浏览器Chrome / Firefox / Safari / Edge上完美运行。

以下是我的代码
HTML

.card-body.fav-card-container(ng-if='availableFavoriteApps()') #custom-akam-apps.contacts.row.fav-container .col-sm-4.col-md-2.col-lg-2.col-xs-6(ng- repeat="app in appPage.favoriteApps | filter:{name:appPage.searchQuery} track by app.id") .card-group.fav-card

CSS

.fav-container { display: flex; overflow-x: auto; padding: 12px 0; } .fav-card { min-width: 180px; }

在IE 11中，弹性项目越来越重叠。请参考所附的屏幕截图。 有人可以在这里建议吗？

Answer 1

尝试-ms-flexbox中的-webkit-flex和.fav-container。希望对您有帮助。谢谢

.fav-container { 
  display: flex; 
  display: -ms-flexbox;
  display: -webkit-flex;
  overflow-x: auto; 
  padding: 12px 0; 
} 

.fav-card { 
  min-width: 180px; 
}