Primeflex Flexgrid support for IE11? any workaround to get the flexgrid working on IE?

Question

The columns alignment using "p-dir-col" does not display as expected in IE11.

To reproduce, check out the demo page opened in Internet Explorer 11: https://www.primefaces.org/primeng/#/flexgrid

=> There are no space between each row in IE, while the columns are correctly displayed in Chrome for instance.

On IE

On other browsers e.g chrome

Answer 1

I try to visit the PrimeNG site and try to check that example using Chrome and IE 11 browser.

I made some tests with it and find that issue caused by flex-basis

I check the documentation and I find information below.

When a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element.

Reference:

Flex basis Browser compatibility

Here, if you check the value of flex-basis on that grid using developer tools than you can find that it is set as 0px

To fix the issue for IE browser, you need to set flex-basis: auto like below.

flex-basis:auto;

Testing result in IE 11:

As a work around, user can create their custom CSS classes and use for grid to display properly in IE because user cannot make any changes in third party utility.