Why my visual interface doesn't work on IE 11 but yes it does in edge, chrome firefox etc.. display:flexbox could be the problem?

Question

There is a lot of things in my web project that doesn't work on IE 11. I have tables inside of divs and that div have display: flex inside. They are shown well on all platforms but IE 11. In IE 11 seems to have height: 1px due to I don't really reach to see the table well.

I have another div that owns a table that I set invisibility hidden calling a function at the beginning of the rendering (not static, just check a state and then apply or not if it should be hidden or not) and I had checked by logs that should be hidden and it still appears like the other table.

I use this.myDivTableContent.style= 'visibility: hidden'; to hide it that works perfectly in all other browsers.

I don't know what I have done bad but since I decided to see how in IE 11 works is like all project visual interface will have to be changed if I want to make work on it.

I let you 2 pictures to see the diff with chrome and IE 11.

CHROME:

IE11:

Answer 1

display: flex is partially supported by IE11.

When in doubt, you can use the site: https://caniuse.com/#search=display%3Aflex

You can use tables to avoid using flex

Look at this: https://css-tricks.com/complete-guide-table-element/

You can also try some polyfill like this:

You should change all you'r view but it will be a little more easy.