I have been working on a page layout using flexbox which all looks fine/behaves in modern browsers but when I test in IE 10 & 11 the layout is not behaving as it should.
In a desktop view the .flexItem should be 50% width so that an image and text sits side by side. But in IE the image is not appearing and the .flexItem appears to be 100% width…
Any suggestions as to what I am doing wrong? Page link here.
I believe its a bug in IE11 and one solution is to change the flex:1 0 50% to flex:1 0 auto and then add width:50% instead.
Another fix would be to remove the padding from the flex-items and apply padding to the inner elements instead. IE11 gets confused when you have flex:1 0 50% and the element also has padding as it seems to ignore border-box rules.
Thank you @PaulOB - that worked perfectly.
It’s hard to find fixes to problems when you are not sure exactly what causes it in the first place. I’ll be sure to remember that IE issue from now on.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.