IE 11中的Flexbox重叠弹性项目[重复]答案

【问题标题】：Flexbox overlapping flex item in IE 11 [duplicate]IE 11中的Flexbox重叠弹性项目[重复]
【发布时间】：2019-08-13 02:41:18
【问题描述】：

Screenprint

父容器有 display: flex 。容器还启用了水平滚动。 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 中，弹性项目正在重叠。请参考随附的屏幕截图。有人可以在这里建议吗？

【问题讨论】：

你能上传你的代码吗？
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; }
可以看到IE11部分支持flex。

标签： angular css flexbox internet-explorer-11

【解决方案1】：

在.fav-container 中尝试-ms-flexbox 和-webkit-flex。我希望它会帮助你。谢谢

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

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

【讨论】：

已经尝试了所有这些组合。但没有帮助。这就是为什么考虑寻求社区帮助的原因。
以上代码 sn-p 在我的 IE11 上运行良好。请在小提琴中分享您的完整代码以进行更多说明。谢谢