0

Screenprint

The parent container has display: flex . Also the container has horizontal scroll enabled. Flex items have a specific width too. Its works perfectly on all other browsers Chrome/Firefox/Safari/Edge.

Following is my code
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; }

In IE 11, the flex items are getting overlapped. Please refer the attached screenshot. Can someone advise here?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
RENJITH RV
  • 1
  • 1
  • 1
    Can you upload your code ? – Gaurav Mar 22 '19 at 06:36
  • 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; }` – RENJITH RV Mar 22 '19 at 06:41
  • Could see that IE11 has partial support for flex. – RENJITH RV Mar 22 '19 at 06:44

1 Answers1

0

Try -ms-flexbox and -webkit-flex in .fav-container. I hope it'll help you out. Thanks

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

.fav-card { 
  min-width: 180px; 
}
Hassan Siddiqui
  • 2,799
  • 1
  • 13
  • 22